JS解惑-Object中的key是有序的麼？

當咱們使用for/in遍歷一個Object對象的時候，打印的結果是否按key的順序打印出來呢？

答案是：不必定。

背景

最近在作一個項目的時候，遇到這樣一個需求：

一個下拉列表中有3個固定選項，包括：-1：所有；0：正常；1：失效。

因而，我就定義了一個對象，而後循環這個對象，把結果放到 <option> 上面：

var obj = {
    '-1': '所有',
    '0' : '正常',
    '1' : '失效'
};
複製代碼

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

<!-- 結果倒是: -->
<!-- 0 正常 -->
<!-- 1 失效 -->
<!-- -1 所有 -->
複製代碼

因而就有了今天這篇文章，且看下文。

解惑

Object的key的排序規則究竟是什麼樣子的呢？答案是：

若是key是整數（如：123）或者整數類型的字符串（如：「123」），那麼會按照從小到大的排序。除此以外，其它數據類型，都安裝對象key的實際建立順序排序。

var obj = {
    '-1': '所有',
    '0' : '正常',
    '1' : '失效'
};
for (let key in obj) {
     console.log(key, obj[key]);
};
// result
// 0 正常
// 1 失效
// -1 所有
複製代碼

另外，若是key中除了整數或者整數類型的字符串外，還含有其它數據類型，則整數放在最前面，好比：

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轉換成非整數類型的字符串，使用的時候再還原。

若是所有是類整數的key，則能夠這麼作：

// 每一個key後面加.轉換成字符串
var obj = {
    '-1.': '所有',
    '0.' : '正常',
    '1.' : '失效'
};
for (let key in obj) {
    // ~~ 表示轉換成整數，這樣上面的key又還原成了-1/0/1
    console.log(~~key, obj[key]);
};
// result
// -1 所有
// 0 正常
// 1 失效
複製代碼

可是，若是key是由各類數據類型混合的，那就不能轉換成整數了，能夠這麼作：

// 每一個key前面加.轉換成字符串
var obj = {
    '.a': 111,
    '.我' : 222,
    '.1' : 333,
    '.1.3': 444,
    '.3': 555
};
for (let key in obj) {
    // 從第1個字符取原始的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