脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS for in遍历对象顺序不对

JS for in遍历对象顺序不对解决办法

 更新时间：2023年11月09日 10:21:28   作者：Mr-K  
最近使用for-in语句遍历对象属性时发现遍历顺序并非属性构建顺序,这篇文章主要给大家介绍了关于JS for in遍历对象顺序不对的解决办法,需要的朋友可以参考下

后台返回对象参数展开后如下

当通过 for in 循环存放到数组的时候得到了

很显然顺序跟想象的不一样，因为对象中没有顺序，他不是数组，所以想要得到一个顺序就首先要只给对象指定规则，这里是通过对象的value的字母来指定的规则

//循环中使用
for(let item in this.objectOrder(data[0])){
	this.ChartsTabData.push(item)
								
}
 
//方法
objectOrder(obj) {//排序的函数
	var newkey = Object.keys(obj).sort(); //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
	var newObj = {};//创建一个新的对象，用于存放排好序的键值对
	for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
	    newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
	}
	return newObj;//返回排好序的新对象
}

结果如下

附：JavaScript for...in 循环出来的对象属性顺序到底是什么规律？

简单归结成一句话就是：先遍历出整数属性（integer properties，按照升序），然后其他属性按照创建时候的顺序遍历出来。

我们来看一个例子：

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  "1": "USA"
};

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}

最终遍历出来的结果是：属性 1 先遍历出来， 49 最后遍历出来。

这里的 1、41、44 和 49 就是整数属性。

那什么是整数属性呢？我们可以用下面的比较结果说明：

String(Math.trunc(Number(prop)) === prop

当上面的判断结果为 true，prop 就是整数属性，否则不是。

所以

  • "49" 是整数属性，因为 String(Math.trunc(Number('49')) 的结果还是 "49"。
  • "+49" 不是整数属性，因为 String(Math.trunc(Number('+49')) 的结果是 "49"，不是 "+49"。
  • "1.2" 不是整数属性，因为 String(Math.trunc(Number('1.2')) 的结果是 "1"，不是 "1.2"。

上面的例子中，如果想按照创建顺序循环出来，可以用一个 讨巧 的方法：

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for(let code in codes) {
  console.log( +code ); // 49, 41, 44, 1
}

总结 

到此这篇关于JS for in遍历对象顺序不对解决办法的文章就介绍到这了,更多相关JS for in遍历对象顺序不对内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript和JQuery的鼠标mouse事件冒泡处理

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    这篇文章主要介绍了JavaScript和JQuery的鼠标mouse事件冒泡处理,本文总结出了mouse事件的一些定论,并分别给出了JavaScript和JQuery测试代码,需要的朋友可以参考下
    2015-06-06
  • 学习使用bootstrap3栅格系统

    学习使用bootstrap3栅格系统

    这篇文章主要教会大家学习使用bootstrap3栅格系统，bootstrap开发环境搭建，还介绍了栅格系统的类型，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 全网小程序接口请求封装实例代码

    全网小程序接口请求封装实例代码

    这篇文章主要给大家介绍了关于全网小程序接口请求封装的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Javascript数组去重的几种方法详解

    Javascript数组去重的几种方法详解

    下面小编就为大家带来一篇Javascript数组去重的几种方法详的介绍。小编觉得听错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看
    2021-09-09
  • 微信小程序中视频的显示与隐藏功能

    微信小程序中视频的显示与隐藏功能

    这篇文章主要介绍了微信小程序中视频的显示与隐藏,思路大概是定义一个标记变量，控制视频的播放与暂停，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-10-10
  • javascript实现图片上传前台页面

    javascript实现图片上传前台页面

    这篇文章主要介绍使用javascript实现图片上传并在前台页面显示，代码很简单，需要的朋友可以参考下
    2015-08-08
  • JavaScript设计模式之构造函数模式实例教程

    JavaScript设计模式之构造函数模式实例教程

    这篇文章主要介绍了JavaScript设计模式之构造函数模式,结合实例形式分析了构造函数模式的概念、功能、定义及使用方法,需要的朋友可以参考下
    2018-07-07
  • 深入理解JavaScript中async/await的错误处理方式

    深入理解JavaScript中async/await的错误处理方式

    在现代JavaScript开发中,异步编程是不可或缺的一部分,async和await是一种强大的异步编程工具,它们使得编写和维护异步代码更加容易和清晰,然而,异步操作仍然可能会出现错误,本文将深入探讨async和await的错误处理方式,提供详细的代码示例和解释
    2023-09-09
  • 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    这篇文章主要介绍了手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 怎样使你的 JavaScript 代码简单易读（推荐）

    怎样使你的 JavaScript 代码简单易读（推荐）

    这篇文章主要介绍了怎样使你的 JavaScript 代码简单易读，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论