javascript for in 默认进行属性排序

作者:杨润炜
日期:2016/8/24 17:12

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

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

输出结果顺序为:

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

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

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

  1. 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.

解决方案

数组替代

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

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

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

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

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

参考

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

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/71.html
邮箱:glowrypauky@gmail.com
QQ: 892413924