當我們使用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>