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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
javascript 模拟点击广告
2010/01/02 Javascript
js 文件引入实现代码
2010/04/23 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python如何查看微信消息撤回
2018/11/27 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
音乐教学案例
2014/01/30 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
联欢晚会主持词
2014/03/25 职场文书
安全保证书范文
2014/04/29 职场文书
2014年党务公开方案
2014/05/08 职场文书
优秀家长自荐材料
2014/08/26 职场文书
同意报考公务员证明
2015/06/17 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
导游词之山海关
2019/12/10 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang