JavaScript for...in 循環出來的對象屬性順序究竟是什麼規律？

在學習 JavaScript 語言的 for...in 循環時，老是會被告知：用它循環對象，循環出來的屬性順序並不可靠，因此不要在 for...in 中作依賴對象屬性順序的邏輯判斷。

可是咱們本身寫一個對象時，來回刷新好幾遍，發現循環出來的屬性順序是同樣的啊？

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for(let key in user) {
  console.log( key ); // name age isAdmin ← 是同樣的啊
}

// 不信再寫一個對象
let tom = {
  gender: 'male',
  hasGirlfriend: false,
  isFunny: true
};

for(let key in tom) {
  console.log( key ); // gender hasGirlfriend isFunny ← 仍是同樣的啊
}
複製代碼

怎麼回事呢？我今天讀到了 一段文章，就解釋了 for...in 循環出來的對象屬性順序究竟是怎樣的。

讀後，我明白了。如今分享給你們。

簡單歸結成一句話就是：先遍歷出整數屬性（integer properties，按照升序），而後其餘屬性按照建立時候的順序遍歷出來。

咱們來看一個例子：

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  "1": "USA"
};

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}
複製代碼

最終遍歷出來的結果是：屬性 1 先遍歷出來， 49 最後遍歷出來。

這裏的 1、41、44 和 49 就是整數屬性。

那什麼是整數屬性呢？咱們能夠用下面的比較結果說明：

String(Math.trunc(Number(prop)) === prop
複製代碼

當上面的判斷結果爲 true，prop 就是整數屬性，不然不是。

因此

• "49" 是整數屬性，由於 String(Math.trunc(Number('49')) 的結果仍是 "49"。
• "+49" 不是整數屬性，由於 String(Math.trunc(Number('+49')) 的結果是 "49"，不是 "+49"。
• "1.2" 不是整數屬性，由於 String(Math.trunc(Number('1.2')) 的結果是 "1"，不是 "1.2"。

上面的例子中，若是想按照建立順序循環出來，能夠用一個 討巧 的方法：

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for(let code in codes) {
  console.log( +code ); // 49, 41, 44, 1
}
複製代碼

（完）