JS解惑之Object中的key是有序的么

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:57:35

JS解惑之Object中的key是有序的么

JS解惑之Object中的key是有序的么:當(dāng)我們使用for/in遍歷一個(gè)Object對象的時(shí)候，打印的結(jié)果是否按key的順序打印出來呢？答案是：不一定。背景最近在做一個(gè)項(xiàng)目的時(shí)候，遇到這樣一個(gè)需求：一個(gè)下拉列表中有3個(gè)固定選項(xiàng)，包括：-1：全部；0：正常；1：失效。于是，我就定義了一個(gè)對象

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS解惑之Object中的key是有序的么:當(dāng)我們使用for/in遍歷一個(gè)Object對象的時(shí)候，打印的結(jié)果是否按key的順序打印出來呢？答案是：不一定。背景最近在做一個(gè)項(xiàng)目的時(shí)候，遇到這樣一個(gè)需求：一個(gè)下拉列表中有3個(gè)固定選項(xiàng)，包括：-1：全部；0：正常；1：失效。于是，我就定義了一個(gè)對象

當(dāng)我們使用for/in遍歷一個(gè)Object對象的時(shí)候，打印的結(jié)果是否按key的順序打印出來呢？

答案是：不一定。

背景

最近在做一個(gè)項(xiàng)目的時(shí)候，遇到這樣一個(gè)需求：

一個(gè)下拉列表中有3個(gè)固定選項(xiàng)，包括：-1：全部；0：正常；1：失效。

于是，我就定義了一個(gè)對象，然后循環(huán)這個(gè)對象，把結(jié)果放到 <option> 上面：

var obj = {
 '-1': '全部',
 '0' : '正常',
 '1' : '失效'
};

<!-- Vue代碼片段 -->
<select>
 <option v-for="(item, key) in obj" :value="key">{{item}}</option>
</select>

<!-- 結(jié)果卻是: -->
<!-- 0 正常 -->
<!-- 1 失效 -->
<!-- -1 全部 -->

于是就有了今天這篇文章，且看下文。

解惑

Object的key的排序規(guī)則到底是什么樣子的呢？答案是：

如果key是整數(shù)（如：123）或者整數(shù)類型的字符串（如：“123”），那么會按照從小到大的排序。除此之外，其它數(shù)據(jù)類型，都安裝對象key的實(shí)際創(chuàng)建順序排序。

var obj = {
 '-1': '全部',
 '0' : '正常',
 '1' : '失效'
};
for (let key in obj) {
 console.log(key, obj[key]);
};
// result
// 0 正常
// 1 失效
// -1 全部

另外，如果key中除了整數(shù)或者整數(shù)類型的字符串外，還含有其它數(shù)據(jù)類型，則整數(shù)放在最前面，比如：

var obj = {
 'a': 111,
 '我' : 222,
 '1' : 333,
 '1.3': 444,
 '3': 555
};
for (let key in obj) {
 console.log(key, obj[key]);
};
// result
// 1 333
// 3 555
// a 111
// 我 222
// 1.3 444

解決

那還是上面的問題，我如何讓對象按key的順序輸出呢？答案是：

將key轉(zhuǎn)換成非整數(shù)類型的字符串，使用的時(shí)候再還原。

如果全部是類整數(shù)的key，則可以這么做：

// 每個(gè)key后面加.轉(zhuǎn)換成字符串
var obj = {
 '-1.': '全部',
 '0.' : '正常',
 '1.' : '失效'
};
for (let key in obj) {
 // ~~ 表示轉(zhuǎn)換成整數(shù)，這樣上面的key又還原成了-1/0/1
 console.log(~~key, obj[key]);
};
// result
// -1 全部
// 0 正常
// 1 失效

但是，如果key是由各種數(shù)據(jù)類型混合的，那就不能轉(zhuǎn)換成整數(shù)了，可以這么做：

// 每個(gè)key前面加.轉(zhuǎn)換成字符串
var obj = {
 '.a': 111,
 '.我' : 222,
 '.1' : 333,
 '.1.3': 444,
 '.3': 555
};
for (let key in obj) {
 // 從第1個(gè)字符取原始的key
 console.log(key.substring(1), obj[key]);
};
// result
// a 111
// 我 222
// 1 333
// 1.3 444
// 3 555

最后

回歸到我最初遇到的問題，那就這么解決了：

var obj = {
 '-1.': '全部',
 '0.' : '正常',
 '1.' : '失效'
};
<select>
 <option v-for="(item, key) in obj" :value="~~key">{{item}}</option>
</select>

參考

Objects#ordered-like-an-object

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS解惑之Object中的key是有序的么

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： js 序的 key

熱門焦點(diǎn)

JS解惑之Object中的key是有序的么

JS解惑之Object中的key是有序的么

JS解惑之Object中的key是有序的么

最新推薦

猜你喜歡

熱門推薦