`
mbn
  • 浏览: 23311 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Chrome Opera 中 for-in 语句遍历出对象属性的顺序与定义的不同

阅读更多
在各个浏览器下运行如下js代码:

var x = {
     c:"Beijing", 
     12:12
}; 
for(var a in x){
     alert(a+": "+x);
}

看看alert出来的顺序在各个浏览器下有何不同。



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

Chrome Opera 中 for-in 语句遍历出对象属性的顺序与定义的不同
标准参考根据 ECMA-262(ECMAScript)第三版中描述,for-in 语句的属性遍历的顺序是由对象定义时属性的书写顺序决定的。
关于 ECMA-262(ECMAScript)第三版中 for-in 语句的更多信息,请参考 ECMA-262 3rd Edition 中 12.6.4 The for-in Statement。
在现有最新的 ECMA-262(ECMAScript)第五版规范中,对 for-in 语句的遍历机制又做了调整,属性遍历的顺序是没有被规定的。
关于 ECMA-262(ECMAScript)第五版中 for-in 语句的更多信息,请参考 ECMA-262 5rd Edition 中 12.6.4 The for-in Statement。
新版本中的属性遍历顺序说明与早期版本不同,这将导致遵循 ECMA-262 第三版规范内容实现的 JavaScript 解析引擎在处理 for-in 语句时,与遵循第五版规范实现的解析引擎,对属性的遍历顺序存在不一致的问题。
问题描述Chrome Opera 中使用 for-in 语句遍历对象的属性时,遍历出的属性顺序与对象定义时不同。
造成的影响在使用了 for-in 遍历对象属性,并且依赖属性顺序的脚本中,该问题可能造成脚本报错,功能失效。
受影响的浏览器Chrome Opera问题分析Chrome Opera 中使用 for-in 语句遍历对象属性时会遵循一个规律,它们会先提取所有 key 的 parseFloat 值为非负整数的属性, 然后根据数字顺序对属性排序首先遍历出来,然后按照对象定义的顺序遍历余下的所有属性。其它浏览器则完全按照对象定义的顺序遍历属性。
分析以下代码:
<script type="text/javascript">
        window.onload = function(){
                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
                },
                info = document.getElementById("info"), key;

                for(key in obj){
                        info.innerHTML += key + " : " + obj[key] + "<br/>";
                }
        }
</script>
<div id="info"></div>

以上代码测试了对象属性 key 为正负整数及小数、字符串和符号的情况下 for-in 语句遍历的顺序。执行代码,各浏览器中表现如下:
Chrome OperaIE6 IE7 IE8 Firefox Safari经测试该问题与文档模式、属性 value 的数据类型以及对象是否是直接量创建的无关。
可见,Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范。因此,使用 for-in 语句遍历对象属性时遍历书序并非属性构建顺序。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范,属性遍历顺序由属性构建的顺序决定。1
【注】:IE6 IE7 IE8 Firefox Safari 浏览器的 JavaScript 解析引擎完成时间早于 ECMA-262 第五版规范发布时间,他们均遵守第三版规范,这无可厚非。
解决方案for-in 语句无法保证遍历顺序,应尽量避免编写依赖对象属性顺序的代码。如果想顺序遍历一组数据,请使用数组并使用 for 语句遍历。 如果想按照定义的次序遍历对象属性,请参考本文针对各浏览器编写特殊代码。
分享到:
评论

相关推荐

    Javascript for in的缺陷总结

    for...in语句是JavaScript中用于遍历对象属性的一种方式,它能够遍历对象的可枚举属性,包括对象自身的和继承的。然而,for...in语句并不是完美无缺的,它存在一些缺陷,尤其是在进行跨浏览器开发时,这些问题尤为...

    js Element Traversal规范中的元素遍历方法.docx

    需要注意的是,Element Traversal规范在以下浏览器中得到支持:IE9+,Firefox 3.5+,Safari 4+,Chrome 和 Opera 10+。 了解并利用这些新的属性,开发者可以更有效地编写跨浏览器的JavaScript代码,减少与元素遍历...

    javascript入门指导

    - **程序控制结构**:条件语句(if...else)、循环语句(for、while)等。 - **函数**:定义可重复使用的代码块,提高代码复用性和维护性。 - **面向过程与面向对象编程**:JavaScript支持这两种编程范式,开发者...

    javascript中快速定位的方法

    2. **进阶技巧**:通过循环遍历对象的属性并输出,可以查看对象的所有属性和对应的值。 - **示例**: ```javascript var str = ""; for (var i in obj) { str += i + ": " + obj[i] + "\n"; } alert(str); `...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...

    javascript教学文档.pdf

    - **未定义(undefined)**:表示变量未赋值或对象属性不存在。 - **复合数据类型(引用类型)**:如对象和数组,数组可以包含不同类型的数据。 JavaScript中的运算符包括算术运算符(`+`、`-`、`*`、`/`、`%`、`++...

    ExtAspNet_v2.3.2_dll

    支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...

    探讨JavaScript中声明全局变量三种方式的异同

    在Firefox、Chrome、Safari和Opera中,通过`var`和隐式方式声明的全局变量`a1`和`a2`都能被`for in`循环获取到。但在IE6/7/8/9中,只有通过`window.a3`方式声明的`a3`能被获取。这是因为旧版IE浏览器对变量的处理与...

    Javascript中获取出错代码所在文件及行数的代码

    在catch语句中,我们可以获得一个Error对象,它通常包含以下属性: - message:错误提示信息; - fileName:出错代码所在的文件名; - lineNumber:出错代码所在的行数; - stack:错误堆栈信息; - name:异常对象...

    前端设计面试2.pdf

    9. **浏览器内核**:IE使用Trident内核,Mozilla使用Gecko,Chrome和基于WebKit的浏览器(包括Safari)最初使用WebKit,现在Chrome和Opera使用Blink内核,Opera曾经使用Presto,但现在也转向了Blink。 10. **HTML5...

    js.pdf

    `Object`方法如`keys`、`values`和`entries`用于遍历对象属性。 8. **数组**:JavaScript数组支持多种方法,如`push`、`pop`、`forEach`等,且数组是可迭代对象,可以使用`for...of`循环。 9. **错误处理**:`try....

    MF00492-ASP.NET企业人力资源管理.zip

    向工作表中添加图表时,Visual Studio Tools for Office将创建一个 Chart对象,可以直接对此对象进行编程,而不必遍历 Microsoft Office Excel对象模型。 4、开放的系统平台架构,完善的二次开发支持,无限扩展功能 ...

    ajax 数据库实例

    // 代码适用于IE7+、Firefox、Chrome、Opera、Safari xmlhttp = new XMLHttpRequest(); } else { // 代码适用于IE6、IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange =...

    jQuery性能优化

    现代浏览器如Firefox、Safari、Chrome、Opera等支持`getElementByClassName()`方法,性能尚可;但在IE5-IE8中则相对较慢。 - **最慢的选择器**:**伪类选择器**和**属性选择器**。 - 如`$(':hidden')`用于选择所有...

    javascript中json基础知识详解

    JSON中的对象与JavaScript中的对象字面量类似,但是有以下不同之处:没有声明变量、末尾不需要加分号、对象的属性名任何时候都必须使用双引号。对象可以嵌套其他对象,例如: ```json { "name": "LaoWang", "age":...

    HTML5 WEB SQL 概念和基本操作

    HTML5的Web SQL是一种在浏览器本地存储数据的技术,尽管它并未被纳入HTML5规范,但仍然在某些浏览器中得到支持,比如Chrome、Safari和Opera。Web SQL提供了一个API,使得开发者可以使用SQL来操作客户端数据库,这...

    javascript高级编程之函数表达式 递归和闭包函数

    关于函数的name属性,这是一个非标准特性,存在于像Firefox, Safari, Chrome和Opera这样的浏览器中。它可以访问函数的名称,如果函数是一个命名函数,那么name属性的值就是函数的标识符。对于匿名函数,其name属性的...

    Jquery使用css方法改变样式实例

    无论是IE、Firefox、Chrome、Safari还是Opera,jQuery均提供了良好的兼容性支持。这是它能够在Web开发中广泛流行的原因之一。 7. 使用场景: 在开发中,可以利用jQuery的`css()`方法在用户交互时改变元素的样式,...

    JQuery-1.3.2

    6. **链式调用**:jQuery的API设计为返回jQuery对象,使得方法可以连续调用,如`$("#element").css("color", "red").slideUp(500)`,这在一个语句中设置了元素颜色并执行了滑动隐藏效果。 7. **插件扩展**:jQuery...

    基于HTML5中的WebSQLDatabase来构建应用程序

    目前只有部分浏览器(如Chrome、Safari和Opera)支持这一API。因此,在实际项目中使用时需要注意浏览器兼容性问题。 - **安全性考虑**:由于WebSQLDatabase是在客户端运行的,因此需要对敏感数据进行适当的加密...

Global site tag (gtag.js) - Google Analytics