对json对象遍历我们一般使用for in循环,或者Object.keys + 数组方法。在接触js以来听到过一种说法:

for in 遍历顺序是不可靠的

但是在实际开发中for in 循环也是按照其键值对的排列先后被遍历,直到遇见了下面的数据:

const data = {
"11": 11,
"2": 2,
"9": 9,
"1": 1
}
var dsd = JSON.stringify(a)
console.log(a); // { '1': 1, '2': 2, '9': 9, '11': 11 }
var keys = Object.keys(a)
console.log(keys); // [ '1', '2', '9', '11' ]
for(var i in a){
console.log(i); 1 2 9 11
}

遍历的时候按照数字从小到大排序了,为什么不能按照给定的顺序输出呢?

在文章5分钟彻底理解Object.keys中作者通过查阅ECMAscript规范,最后提供了如下的结论:

Object.keys在内部会根据属性名key的类型进行不同的排序逻辑。分三种情况:

  1. 如果属性名的类型是Number,那么Object.keys返回值是按照key从小到大排序
  2. 如果属性名的类型是String,那么Object.keys返回值是按照属性被创建的时间升序排序。
  3. 如果属性名的类型是Symbol,那么逻辑同String相同

也就是说在使用到数字型的key的时候,需要特别注意,遍历出来的顺序和想要的可能会不一致

自己也查看了下for in 部分的规范,其中问题出现在 object.[[OwnPropertyKeys]] ,该方法规范地址在这儿,其中就是定义了上面的结论。

直接或者间接使用 object.[[OwnPropertyKeys]]的 API还有如下:

  1. Object.entries 规范地址
  2. Object.values 规范地址
  3. Object.getOwnPropertyNames 规范地址
  4. Reflect.ownKeys 规范地址
  5. Object.keys (规范地址)

json对象遍历顺序问题的更多相关文章

  1. 用递归将嵌套的JSON对象遍历出来,转为二维数组

    如题所示,代码如下: var arJsonNesting = [{id:1,name:"zhang3" ,children:[{id:2,name:"zhang33&qu ...

  2. JS对JSON对象遍历输出的时候真的是按照顺序输出吗?

    对象的遍历输出并不是按照对象属性定义顺序来的,那么是按照什么规则来的呢,仔细深入研究你会发现,这还跟浏览器有关系,Chrome跟IE是不一样的,所以给出以下结论: Chrome Opera 的 Jav ...

  3. JSON对象遍历方法

    JSON对象提前不知道其属性和结构,遍历其值 var json2 = { "name": "txt1", "name2": "tx ...

  4. Json对象遍历

    var json = {"id":"123","name":"tom","sex":"ma ...

  5. 用递归将嵌套的JSON对象遍历出来,转为二维数组 或一维数组

    var map = new Array();//二维数组 var map2 = new Array();//一维数组 for (var i = 0; i < e.Data.length; i++ ...

  6. js对象遍历输出顺序错乱的问题

    一.js对象遍历顺序错乱的原因 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',hobby:'dsf ...

  7. js遍历json对象

    原生js遍历json对象 遍历json对象: 无规律: <script> var json = [ {dd:'SB',AA:'东东',re1:123}, {cccc:'dd',lk:'1q ...

  8. JS JSON对象相关

    1.多对象合并 将2个或2个以上对象(object{....})中的属性进行合并,即最后合并为一个object{.....} 解决办法:Object.assign 方法 var form = {nam ...

  9. JSON数组,JSON对象,数组的区别与基本操作整理

    JSON 语法规则 JSON 语法是 javascript 对象表示语法的子集. 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数据的书写格式是: ...

随机推荐

  1. three.js 着色器材质之glsl内置函数

    郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措.原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着 ...

  2. firewalld 极速上手指南

    从CentOS6迁移到7系列,变化有点多,其中防火墙就从iptables变成了默认Firewalld服务.firewalld网上资料很多,但没有说得太明白的.一番摸索后,总结了这篇文章,用于快速上手. ...

  3. Android SQLite轻量级数据库的删除和查找操作

    今天主要是补充昨天的内容,本打算合成一章的,但是毕竟一天一天的内容写习惯了. 就这样继续昨天的,昨天只讲了创建以及增加和查询, 其实用法都差不多,今天学长也是在原有的基础上写的,还顺便融合了Share ...

  4. python8.3多进程

    from multiprocessing import Processimport time def run1 (name,sex): print(name,sex,"执行进程1" ...

  5. 【API进阶之路】高考要考口语?我用多模态评测API做了一场10w+刷屏活动

    摘要:闲着没事用多模态评测API做了一个测评英语口语的互动小游戏,居然成了一场10万人参与的刷屏级活动. 上一期故事说到,我成为了公司技术委员会副主席,上任后的第一件事是建立了一个云容器化的研发资料库 ...

  6. Elasticsearch第三篇:查询详解

    从第一篇开始,我用的ES版本就是7.8.0的,与低版本略有不同,不同点可以参考官方介绍,最大的不同就是抛弃 type 这一概念,为了方便测试,首先建立一个学生成绩的索引库(在建立的同时,规定字段类型, ...

  7. java web 下载文件 response.setHeader()的用法 (转载)

    response.setHeader()的用法 response.setHeader()下载中文文件名乱码问题 收藏 1. HTTP消息头 (1)通用信息头 即能用于请求消息中,也能用于响应信息中,但 ...

  8. JS学习第三天

    运算符: 赋值运算符 “=” ,将“=”右边的值赋值给左边 比较运算符 “>   <   >=  <=   ==   !=   ===”,  ==比较两边内容是否一致      ...

  9. Spring——IOC(控制反转)与DI(依赖注入)

    IOC与DI的理解及使用 控制反转IOC(Inversion of Control)是一种设计思想,DI(依赖注入)是实现IOC的一种方法.在没有IOC的程序中,我们使用面向对象编程,对象的创建于对象 ...

  10. python对端口进行扫描

    使用cocket模块配合多线程对端口进行扫描,后续功能正在思考ing. import socket from multiprocessing.dummy import Pool as ThreadPo ...