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 IE中的DOM ready应用技巧
Jul 23 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JS错误处理与调试操作实例分析
Apr 13 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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
星际流派综述
2020/03/04 星际争霸
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
php英文单词统计器
2016/06/23 PHP
php技巧小结【推荐】
2017/01/19 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Python创建日历实例
2014/08/21 Python
Python httplib模块使用实例
2015/04/11 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
python使用folium库绘制地图点击框
2018/09/21 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
天网面试题
2013/04/07 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
给老婆的道歉信
2015/01/20 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
2016特色励志班级口号
2015/12/24 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL