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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
javascript this指向相关问题及改变方法
Nov 19 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python MD5文件生成码
2009/01/12 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
总务岗位职责
2013/11/19 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
高考励志标语
2014/06/05 职场文书
高中学校对照检查材料
2014/08/31 职场文书
普通话演讲稿
2014/09/03 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
2016教师节感恩话语
2015/12/09 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL