javascript for-in有序遍历json数据并探讨各个浏览器差异

作者:mrr 时间:2024-05-25 15:18:17 

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,json,遍历
0
投稿

猜你喜欢

  • 使用python进行波形及频谱绘制的方法

    2023-02-07 02:48:58
  • python 字典访问的三种方法小结

    2022-03-25 06:07:26
  • python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例

    2023-09-20 17:59:32
  • 详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法

    2022-03-16 09:40:28
  • Keras之fit_generator与train_on_batch用法

    2021-07-10 18:19:31
  • 对numpy中数组转置的求解以及向量内积计算方法

    2023-01-23 16:39:52
  • 浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估

    2023-08-05 18:46:48
  • 如何利用python将Xmind用例转为Excel用例

    2022-06-18 19:18:46
  • 通过Python中的CGI接口讲解什么是WSGI

    2022-08-10 15:04:24
  • Python实现的将文件每一列写入列表功能示例【测试可用】

    2022-12-05 15:12:31
  • 微软雅黑的设计

    2010-02-23 20:36:00
  • 如何使用postman(新手入门)

    2023-07-15 11:56:46
  • 老生常谈CSS网页布局的意义与副作用

    2008-09-12 12:31:00
  • Python中Flask-RESTful编写API接口(小白入门)

    2023-02-07 10:47:46
  • Go语言基础go fmt命令使用示例详解

    2024-01-31 11:37:34
  • 利用Python制作动态排名图的实现代码

    2022-02-04 07:40:51
  • Python字符串详细介绍

    2023-08-29 09:15:09
  • Python安装与基本数据类型教程详解

    2022-04-18 18:44:59
  • Python可视化神器pyecharts之绘制箱形图

    2021-08-04 03:40:53
  • 基于Python实现抢注大词的提词工具

    2022-04-07 02:00:20
  • asp之家 网络编程 m.aspxhome.com