碰到了一个很有意义的题目,js中对象属性的输出是有序的吗?假如有的话,那又遵照如何的划定规矩呢?
这里我们来做一个简朴的讨论,事情之余来一点趣味性的题目。虽不能醍醐灌顶,但能够稳固所学学问,也是极好的~🙈
一、新鲜征象
我们来看如许一个对象,来输出他的属性称号,也就是key值:
var data = {'1':'aaa','2':'bbb','3':'ccc','测试':'000'};
Object.keys(data) ;
["1", "2", "3", "测试"]
嗯,没啥题目。那调解一下末了一项的位置,再来尝尝:
var data = {'测试':'000','1':'aaa','2':'bbb','3':'ccc'};
Object.keys(data);
["1", "2", "3", "测试"]
新鲜,输出的递次被调解了,这是为何呢?我们继承,换一下属性称号,再试一次:
var data = {'a':'000','1':'aaa','2':'bbb','3':'ccc'};
Object.keys(data);
["1", "2", "3", "a"]
依效果来看,貌似有点小规律,我们无妨猜一下。
二、斗胆勇敢猜想
我们来看效果:
["1", "2", "3", "测试"]
["1", "2", "3", "a"]
会不会是依据ASC码的大小递次来输出的呢?
'1'<'2'<'3'<'测试'
'1'<'2'<'3'<'a'
彷佛漏掉了一种状况(字母和汉字的属性称号同时存在),我们试一下:
var data = {'a':'000','3':'ccc','1':'aaa','测试':'bbb',};
Object.keys(data);
["1", "3", "a", "测试"]
调解属性’a’和’测试’的递次呢?
var data = {'测试':'bbb','3':'ccc','a':'000','1':'aaa'};
Object.keys(data);
["1", "3", "测试", "a"]
好了,到此为止,我们能够得出结论了。
结论:对象的遍历输出并不是依据属性的ASC码升序排序的。
三、初见端倪
查阅了一些文档后,得出了以下有用结论:
1.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.
2.Chrome Opera 的 JavaScript 剖析引擎遵照的是新版 ECMA-262 第五版范例。因而,运用 for-in 语句遍历对象属性时遍历书序并不是属性构建递次。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript
剖析引擎遵照的是较老的 ECMA-262 第三版范例,属性遍历递次由属性构建的递次决议。
四、水落石出
Chrome Opera 中运用 for-in 语句遍历对象属性时会遵照一个规律:
它们会先提取一切 key 的 parseFloat 值为非负整数的属性,然后依据数字递次对属性排序起首遍历出来,然后依据对象定义的递次遍历余下的一切属性。
别的浏览器则完整依据对象定义的递次遍历属性。
这和我们上面例子中的数据效果是符合的,嗯,这就是我想要的效果!
五、了案总结
假如想递次遍历一组数据,请运用数组并运用 for 语句遍历。
for-in语句没法保证遍历递次,应只管防止编写依靠对象属性递次的代码。假如想依据定义的序次遍历对象属性,请参考这里针对各浏览器编写特别代码。
因为对象的输出是无序的,然则数组倒是有序的,所以为了保证递次,搞成数组再输出。嗯,就是如许!
六、参考文档
1.ASCII参照表
http://baike.baidu.com/link?u…
2.js对象输出递次
http://stackoverflow.com/ques…
3.遍历出的属性递次与对象定义时差别
http://w3help.org/zh-cn/cause…
4.掌握js中的对象递次输出
https://segmentfault.com/q/10…