當我們使用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
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
