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 keycode总结
Feb 04 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 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结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
python中append函数用法讲解
2020/12/11 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
文艺晚会主持词
2014/03/24 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
贷款委托书范本
2014/04/08 职场文书
办护照工作证明
2014/10/01 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS