javascript for in 默认进行属性排序

js 提供了for in遍历对象，当遍历对象时，我们一般会以为遍历时的顺序会与我们定义对象时的顺序一样，当事实并不是如此，让我们来看看下面的示例：

var o = {'名称': 0, 2: 1, '1': 2, '<': 3, '0K': 4, '我': 5, b: 6, a: 7};
for (var key in o) {
    console.log(key);
}

输出结果顺序为：

1, 2, 名称, <, 0K, 我, b, a

如结果所示，数字或可被转换为数字的属性（暂时未发现有其它属性会被排序）被自动排序，并且会先被遍历到，其它属性则按照定义时的顺序。

使用Object.keys方法出来的顺序也是这种规则。

Object.keys(o); // ["1", "2", "名称", "<", "0K", "我", "b", "a"]

出现这样的现象，其实是因为object本身就是一个无序的集合，Ecmascript中对它的解释如下：

An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

解决方案

数组替代

数组本身是有顺序的，所以我们可以用数组来实现这种有顺序的遍历。

var myData = [{'名称': 0}, {2: 1}, {'1': 2}, {'<': 3}, {'OK': 4}, {'我':5}, {b: 6}, {a: 7}];
for (var item in myData) {
    console.log(myData[item]);
}

或

var keys = ['名称', 2, '1', '<', '0K', '我', 'b', 'a'];
var vals = [0, 1, 2, 3, 4, 5, 6, 7];
for (var item in keys) {
    console.log(keys[item], vals[item]);
}

map

es6新增数据结构，本身也是有顺序的。请看下面示例：

var myObject = new Map();
myObject.set('名称', 0);
myObject.set(2, 1);
myObject.set('1', 2);
myObject.set('<', 3);
myObject.set('OK', 4);
myObject.set('我', 5);
myObject.set('b', 6);
myObject.set('a', 7);
for (var [key, value] of myObject) {
  console.log(key, value);
}

参考

Map() to the rescue; adding order to Object properties