在對一個物件進行遍歷時，每個瀏覽器都有自己的規則，遍歷的順序是不確定的：

var myObject = {
  z: 1,
  '@': 2,
  b: 3,
  1: 4,
  5: 5
};

for (item in myObject) {
  console.log(item)
}
// 1
// 5
// z
// @
// b

因此，在對物件進行遍歷時，不能依賴其遍歷的順序，因為在不同的瀏覽器可能會有不同的表現。

如果需要按照一定的、統一的順序遍歷，如何實現呢？

如果不考慮相容性，可以使用ES6的Map結構實現。

Map物件以插入的順序比那裡元素，for...of迴圈為每一次迴圈返回一個[key, value]

var myObject = new Map();
myObject.set('z', 1);
myObject.set('@', 2);
myObject.set('b', 3);

for (var [key, value] of myObject) {
  console.log(key, value);
}
// z 1
// @ 2
// b 3

如果要考慮相容性，那麼要麼使用兩個分開的陣列（一個儲存key，一個儲存value），要麼構建一個單屬性物件的陣列：

// 使用分開的陣列
var objectKeys = [z, @, b, 1, 5];
for (item in objectKeys) {
	myObject[item]
}

// 構建一個單屬性物件(single-property objects)的陣列
var myData = [{z: 1}, {'@': 2}, {b: 3}, {1: 4}, {5: 5}];
 

參考

• JS TIPS - Map()的營救；使物件屬性有順序