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中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
Yii清理缓存的方法
2016/01/06 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python import用法以及与from...import的区别
2015/05/28 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Pytorch之contiguous的用法
2019/12/31 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python函数定义和调用过程详解
2020/02/09 Python
python中id函数运行方式
2020/07/03 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
校领导推荐信
2013/11/01 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
2014年安全生产责任书
2014/07/22 职场文书
超市周年庆活动方案
2014/08/16 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
大学生村官工作总结2015
2015/04/09 职场文书