博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Object.keys()是按什么顺序返回值的?
阅读量:6217 次
发布时间:2019-06-21

本文共 1726 字,大约阅读时间需要 5 分钟。

碰到了一个很有意思的问题,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参照表
2.js对象输出顺序
3.遍历出的属性顺序与对象定义时不同
4.控制js中的对象顺序输出

转载地址:http://kblja.baihongyu.com/

你可能感兴趣的文章
Python爬虫day2.3—python模块
查看>>
如何用动态参数取得季度数据
查看>>
Unity SceneManager场景管理Chinar详解API
查看>>
PHP学习4——面向对象
查看>>
深度学习第19讲:CNN经典论文研读之残差网络ResNet及其keras实现
查看>>
docker 容器内redis连接refuse的问题
查看>>
web.py源码分析: application(1)
查看>>
前言【最爱的贝叶斯哲学】
查看>>
NoClassDefFoundError: ch/qos/logback/classic/spi/ThrowableProxy
查看>>
从 Everything 到 Listary,自 Launch 归 Wox
查看>>
[Guava源码日报](2)Strings分析
查看>>
TKoa 1.0.1 发布,TypeScript 版的 Node.js Koa 框架
查看>>
使用Free Spire.Presentation生成PowerPoint文件
查看>>
PureScript 0.12.3 发布,静态类型语言
查看>>
Derek解读Bytom源码-Api Server接口服务
查看>>
如何优雅地实现Redis命令setbits与getbits
查看>>
Round Robin 轮询调度算法
查看>>
网络测速插件speedtest
查看>>
使用ABAP编程实现对微软Office Word文档的操作
查看>>
Kafka 分布式消息系统
查看>>