javascript for-in有序遍历json数据并探讨各个浏览器差异


Posted in Javascript onNovember 30, 2015

object本身就是无对象的集合,因此在用 for-in 语句遍历对象的属性时,遍历出的属性顺序与对象定义时不同。

了解W3C标准:

根据 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 语句时,与遵循第五版规范实现的解析引擎,对属性的遍历顺序存在不一致的问题。

 因此在开发中应尽量避免编写依赖对象属性顺序的代码。如下:

<script>
var json1 = {
    "2":{"name":"第1条"},
    "1":{"name":"第2条"},
    "3":{"name":"第3条"}
}
var json2 = [
    {"name":"第1条"},
    {"name":"第2条"},
    {"name":"第3条"}
]
for(var i in json1){
    alert(json1[i].name);
}
//正确
for(var i in json2){
    alert(json2[i].name);
}
</script>

看看for-in代码在个浏览器差异:

javascript for-in有序遍历json数据并探讨各个浏览器差异

下面通过一段代码单独给大家介绍JS 循环遍历JSON数据

JSON数据如:

{"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"valu
e/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"}

用js可以写成:

var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; 
   for(var o in data){ 
    alert(o); 
    alert(data[o]); 
    alert("text:"+data[o].name+" value:"+data[o].age ); 
   }

或是

<script type="text/javascript"> 
function text(){ 
 var json = {"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"value/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"}  
 json = eval(json.options) 
 for(var i=0; i<json.length; i++) 
 { 
   alert(json[i].text+" " + json[i].value) 
 } 
} 
</script>
Javascript 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
javascript操作excel生成报表示例
May 08 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
javaScript语法总结
Nov 25 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
基于javascript如何传递特殊字符
Nov 30 #Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 #Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 #Javascript
javascript中eval和with用法实例总结
Nov 30 #Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 #Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 #Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
常用的js方法合集
2017/03/10 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
Python list操作用法总结
2015/11/10 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
出生公证书样本
2014/04/04 职场文书
产品设计开发计划书
2014/05/07 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
放假通知
2015/04/14 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL