當我們使用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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
