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 相关文章推荐
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 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
咖啡知识大全
2021/03/03 新手入门
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
python使用cookielib库示例分享
2014/03/03 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
Python @property及getter setter原理详解
2020/03/31 Python
Python列表如何更新值
2020/05/27 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
大学生自我鉴定
2013/12/16 职场文书
校园标语大全
2014/06/19 职场文书
户籍证明书标准模板
2014/09/10 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2014年民政工作总结
2014/11/26 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
nginx lua 操作 mysql
2022/05/15 Servers