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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
js实现验证码干扰(静态)
Feb 22 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
基于mysql的bbs设计(二)
2006/10/09 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
Yii2单元测试用法示例
2016/11/12 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
JSON 数据格式详解
2017/09/13 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
浅谈python import引入不同路径下的模块
2017/07/11 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
Yahoo-PHP面试题4
2012/05/05 面试题
一道Delphi上机题
2012/06/04 面试题
计算机求职信
2014/07/02 职场文书
2014年保管员工作总结
2014/11/18 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js