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 相关文章推荐
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
js继承实现方法详解
Dec 16 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
COM in PHP (winows only)
2006/10/09 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
python3中int(整型)的使用教程
2017/03/23 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python的多维空数组赋值方法
2018/04/13 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python中列表的含义及用法
2020/05/26 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
MySQL面试题
2014/01/12 面试题
购房意向书范本
2014/04/01 职场文书
中秋晚会策划方案
2014/06/12 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
律师催款函范文
2015/06/24 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis