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

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

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

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

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

JS一切皆对象理解

Function也是一个函数,函数是一种对象,也有__proto__属性。既然是函数,那么它一定是被Function创建。所以——Function是被自身创建的。所以它的__proto__指向了自身的Prototype。

JavaScript Blob 对象解析

Blob是JavaScript内建对象,表示不可变的原始数据,类似文件的对象。blob是表示原始数据的不可变对象,这些数据不一定是javascript原生格式的,文件接口基于Blob,继承Blob功能并将其扩展为支持用户系统上的文件。

JavaScript重构技巧_对象和值

JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。在本文中,我们将介绍一些优化 JS 类和对象的重构思路。

js判断对象是否为空对象,判断对象中是否有某属性

判断一个对象是否为空对象,本文给出三种判断方法,断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined。

原来JS是这样的_对象属性

同样的字符串赋值到对象,一会儿是字符串类型一会儿是对象,而明明不是对象类型的变量还是可以使用对象属性,为什么会这样呢?JavaScript 中一共有六种主要(语言)类型

javascript如何判断对象是否相等?

JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕。下面我们就来看一下如何判断对象是否相等。

JS之BOM的几个对象

BOM(Browser Object Model)即浏览器对象模型。 BOM提供了独立于内容 而与浏览器窗口进行交互的对象; 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;

Js通过.或者[]访问对象属性的语法、性能等区别

在JavaScript中可以使用 . 或者 [ ] 来访问对象的属性,但是对象中方法只能通过 . 来获取;使用.运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。但是这两种方式有什么区别了?

js是面向对象还是基于对象?

以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质都是对象层。我们就能够理解JavaScript面向对象设计的思路。

Js中如何克隆对象?

我们假设一个变量 name 具有一个与之关联的原始值(number,string,boolean,undefined 和null)。 如果我们将此变量 name 复制到另一个变量name2 ,则原始变量的任何修改都不会影响到第二个变量,因为它们是原始值

点击更多...

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