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遍历对象顺序不对内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
我们在开发中常遇到一种情况,在创建一个元素之后,需要给它绑定事件,这篇文章主要给大家介绍了关于js为新添加元素添加绑定事件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于JavaScript中异步/等待的用法与理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要介绍了基于JS实现简单的样式切换效果代码,涉及简单的javascript控制页面元素样式变换的技巧,非常简单实用,需要的朋友可以参考下2015-09-09
dropzone.js是重量轻的JavaScript库，将HTML元素设置为一个降落区,并通过Ajax文件被上传到服务器。本文给大家详细介绍Dropzone.js实现文件拖拽上传功能，需要的朋友参考下吧2016-11-11
这篇文章主要给大家介绍了关于导入excel时js转换时间的正确方式,以及js读取excel中日期格式转换问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并且探讨下JSONP跨域的原理2014-03-03
这篇文章主要介绍了JavaScript实现的多个图片广告交替显示效果代码,涉及javascript数组遍历及页面元素动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
下面小编就为大家带来一篇响应式表格之固定表头的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了js完全解析url和拼接,需要的朋友可以参考下2022-05-05
最新评论