深入解析 JavaScript 中 for...in 遍历对象 key 顺序混乱的原因与解决方案

解决循环复杂对象时 key 值顺序混乱的问题。

问题描述

当循环纯数字索引对象时，输出的 key 值顺序通常是正确的。

然而，当对象结构变得复杂时，输出的 key 顺序可能会变得混乱，不再遵循预期的创建顺序。

解决方案

//循环中使用
for(let item in this.objectOrder(data)){
	this.objArr.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;//返回排好序的新对象
}

循环对象时，输出 key 值顺序混乱的原因分析。

在 ES6 之前，遍历对象的常见方式是使用 for…in。但该方法存在一个主要问题：它会遍历原型链上的属性，因此必须使用 hasOwnProperty 来检查属性是否直接属于该对象，以排除继承属性。

ES6 之后，我们有了更好的对象遍历方法：

Object.keys()：创建一个包含对象所有自身可枚举属性名的数组。

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
var keys = Object.keys(fruits);
console.log(keys);  //["appple", "pear", "orange"]

Object.values()：创建一个包含对象中每个属性值的数组。

const fruits ={
    appple:22,
    pear:34,
    orange:88
}

var values =Object.values(fruits);
console.log(values); //[22, 34, 88]

Object.entries()：创建一个二维数组，每个内部数组包含两个元素，第一个是属性名，第二个是对应的属性值。

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
var entries = Object.entries(fruits);
console.log(entries);
// [['appple',22],['pear',34],['orange',88]]

const fruits ={
    appple:22,
    pear:34,
    orange:88
}
for (const [fruit,num] of entries) {
    console.log(`we have ${num} ${fruit}`);  //we have 22 appple ...
}

这些 Object 对应的方法也存在类似的顺序问题，但可以通过类似上述方法进行修改或替代，以获得更可控的遍历结果。

下面主要讨论 for…in 的行为。

为什么循环对象时，key 值的顺序会乱？

1. 这是 ECMA 规范的一部分：数字键按升序输出，字符串键按创建顺序输出，且数字键的优先级高于字符串键。2. JavaScript 代码本身不能被计算机直接识别，需要通过 V8 引擎转化为字节码。3. 针对 ECMA 规范，V8 引擎实施了特定的优化策略。4. 属性分为排序属性（elements），用于存储数字键；以及常规属性（properties），用于存储字符串键。为了优化性能，V8 引入了对象内属性（in-object properties）的概念。5. 当对象属性较多时，会采用慢属性存储数据。快属性采用线性数据结构，而慢属性则采用非线性结构（如字典）来存储数据。

1. 遍历顺序为：先遍历出整数属性（integer properties，按升序排列），然后其他属性按照创建时的顺序遍历出来。

整数属性

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"。

「数字属性应该按照索引值大小升序排列，字符串属性根据创建时的顺序排列。并且数字属性优先于字符串属性。」

2. 首先，JavaScript 代码本身不会被计算机直接执行，计算机只能接收二进制的汇编代码，因此中间需要一层转化，而在 Chrome 浏览器中，这个转化由 V8 引擎完成。

在 V8 中，对象属性是如何存储和读取的？

1. 在 V8 中，对象属性被分为两大类：数字类型称为排序属性（elements），字符串类型称为常规属性（properties）。为了有效存储和访问这些属性，V8 分别使用两个线性结构来保存它们。

2. 在 elements 对象中，属性按顺序存放排序属性；properties 属性则指向 properties 对象，在 properties 对象中，常规属性按创建时的顺序保存。

3. 然而，这种方法存在一个问题：查找排序属性时，直接通过索引即可；但查找常规属性时，需要先找到 properties，再找到其中的属性，这增加了一层操作。因此，引入了一个新概念：对象内属性（in-object properties）。

4. 常规属性也有数量限制，默认超过 10 个时，就需要开辟新的空间来保存常规属性。

针对数量较少的对象属性，上述策略完全适用；但当对象属性数量增多时，V8 会采用排序非线性字典结构来存储数据。

• 线性结构：是一个有序数据元素的集合。常见的线性结构包括线性表、栈、队列、双端队列和串（一维数组）。
• 非线性结构：其逻辑特征是一个节点元素可能有多个直接前驱和多个直接后继。

此时，通过线性结构存储数据，查找速度肯定较快；但如果涉及大量数据修改，则会牵一发而动全身，非常消耗性能。因此，当数据量较大时，V8 采用了慢排序策略。

• 快排序：采用线性结构。
• 慢排序：采用非线性结构，例如字典。

3. 同时，这与浏览器有关，Chrome 与 IE 的行为不同，因此得出以下结论：

Chrome 和 Opera 的 JavaScript 解析引擎遵循新版 ECMA-262 第五版规范。因此，使用 for-in 语句遍历对象属性时，遍历顺序并非属性构建顺序。而 IE6、IE7、IE8、Firefox 和 Safari 的 JavaScript 解析引擎遵循较老的 ECMA-262 第三版规范，属性遍历顺序由属性构建的顺序决定。

在 Chrome 和 Opera 中使用 for-in 语句遍历对象属性时，会遵循以下规律：它们会先提取所有 key 的 parseFloat 值为非负整数的属性，然后根据数字顺序对这些属性排序并首先遍历出来，最后按照对象定义的顺序遍历余下的所有属性。

https://www.jb51.net/javascript/304306x8c.htm

总结

到此这篇关于 js 中 for...in 循环对象时输出 key 值顺序混乱问题解决的文章就介绍到这了，更多相关 js for...in 循环输出 key 值顺序混乱内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！