关闭

js中关于for...in遍历对象属性的顺序问题

时间: 2018-02-27阅读: 3377标签: 对象

下面是一个对象,并为对象添加了一些属性:

var obj = {
      city: "Beijing",
      12: 12,
      7: 7,
      0: 0,
      "-2": -2,
      "age": 15,
      "-3.5": -3.5,
      7.7: 7.7,
      _: "___",
      online: true,
      3: 3,
      "23": "23",
      "44": 44
}

对象使用obj.length时,它得到的值是undefined的,所以只能通过for...in循环获取对象的属性:

for(let key in obj){
  console.log(key);
}

我们发现并没有按属性的顺序显示,而且顺序在各个浏览器下显示也不同。 这是为什么呢?


标准参考

根据 ECMA-262(ECMAScript)第三版中描述,for-in 语句的属性遍历的顺序是由对象定义时属性的书写顺序决定的

在现有最新的 ECMA-262(ECMAScript)第五版规范中,对 for-in 语句的遍历机制又做了调整,属性遍历的顺序是没有被规定的

新版本中的属性遍历顺序说明与早期版本不同,这将导致遵循 ECMA-262 第三版规范内容实现的 JavaScript 解析引擎在处理 for-in 语句时,与遵循第五版规范实现的解析引擎,对属性的遍历顺序存在不一致的问题。


Chrome Opera 中使用 for-in 语句遍历对象属性时会遵循一个规律,它们会先提取所有 key 的 parseFloat 值为非负整数的属性, 然后根据数字顺序对属性排序首先遍历出来,然后按照对象定义的顺序遍历余下的所有属性。其它浏览器则完全按照对象定义的顺序遍历属性。

以上代码测试了对象属性 key 为正负整数及小数、字符串和符号的情况下 for-in 语句遍历的顺序。执行代码,各浏览器中表现如下: 


Chrome OperaIE6 IE7 IE8 Firefox Safari
result in Chrome and Operaresult in other browsers

经测试该问题与文档模式、属性 value 的数据类型以及对象是否是直接量创建的无关。

可见,Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范。因此,使用 for-in 语句遍历对象属性时遍历书序并非属性构建顺序。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范,属性遍历顺序由属性构建的顺序决定。

【注】:IE6 IE7 IE8 Firefox Safari 浏览器的 JavaScript 解析引擎完成时间早于 ECMA-262 第五版规范发布时间,他们均遵守第三版规范,这无可厚非。


解决方案

for-in 语句无法保证遍历顺序,应尽量避免编写依赖对象属性顺序的代码。如果想顺序遍历一组数据,请使用数组并使用 for 语句遍历。 如果想按照定义的次序遍历对象属性,请参考本文针对各浏览器编写特殊代码。


参考 http://www.w3help.org/zh-cn/causes/SJ9011  

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/449

关闭

node中的全局对象是什么?

JavaScript中有一个特殊的对象,称为全局对象(Global Object),它及其所有属性都可以在程序的任何地方访问,即全局变量。那么在node中全局对象是什么?在浏览器JavaScript中,通常window是全局对象, 而Node.js中的全局对象是globa,所有全局变量(除了 global 本身以外)都是global对象的属性。

JS数组或对象中的内容间隔显示

会在5秒中之后几个数字几乎一起显示,并不是我们希望的间隔5秒显示一个数字。间隔显示,不要使用for 循环,原因是for循环是同步,setTimeout是异步,同步执行完再执行异步。

javascript的navigator对象及属性userAgent

js test()方法用于检测一个字符串是否匹配某个模式.如果字符串中有匹配的值返回 true ,否则返回 false

js是面向对象还是基于对象_js面向对象的代码体现

javascript是面向对象的,还是面向过程的?基于对象是什么意思?对象: 指的是对某一类事物进行抽象,抽象出这一类事物共同的特征以及行为,也就是属性和方法

js对象 对属性调用.和[] 两种方式的区别

在 JS 对象中,调用属性一般有两种方法——点和中括号的方法。 标准格式是对象.属性(不带双引号),注意一点的是:js对象的属性,key标准是不用加引号的,加也可以,特别的情况必须加,如果key数字啊,表达式啊等等

javascript中如何创建对象?

javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象。那么,既然是面象对象的,如何来创建对象呢?

深入JS对象属性

属性决定JS中对象的状态,本文章主要分析这些属性是如何工作的。JS有三种不同的属性:数据属性,访问器属性和内部属性。对象的普通属性将字符串名称映射到值。例如,下面对象obj有一个数据属性,名称为 prop,对应的值为 123:

Js对象的增删改查

以后看到的,除了5种基本数据类型就是对象 ,JS中表示一个人的信息(name,gender,age),如果使用基本数据类型,我们所创建的变量都是独立的,不能成为一个整体, 对象属于一种复合的数据类型

JavaScript中的map()和forEach()有什么区别?

JavaScript中一些最受欢迎的功能可能是map和forEach。从ECMAScript 5(简称es5)开始,它们就开始存在了。在本文中,我将讨论它们之间的主要区别,并向你展示其用法的一些示例。

利用 WeakMap 对 Vue 新建数组中的对象赋予 :key

在 Vue 中,对组件进行循环都需要加入key以便“就地复用”,可是在某些情况下,我们需要新建多个对象,而这些对象不是从后端获取到的,而是前端生成的,没有唯一值,且 Vue 目前版本只允许字符串,数字作为组件的 key

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!