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 图片延迟加载并等比缩放插件
Nov 09 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
微信小程序实现轨迹回放的示例代码
Dec 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
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
深入了解javascript中的prototype与继承
2013/04/14 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python计算最大优先级队列实例
2013/12/18 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
班主任寄语大全
2014/04/04 职场文书
锦旗标语大全
2014/06/23 职场文书
优秀教师申报材料
2014/12/16 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL