循环中对象引用的常见陷阱
在javascript开发中，我们经常需要在循环中构建数据结构，例如将多个对象收集到一个数组中。然而，一个常见的误解可能导致意想不到的结果：当在循环外部声明一个对象，并在循环内部修改其属性后将其推入数组时，最终数组中的所有元素都可能指向同一个对象，并显示该对象在循环结束时的最终状态。
考虑以下示例代码：
function testProblematic() {
const obj = {}; // 在循环外部创建对象
const arr = [];
for (let i = 0; i < 100; i++) {
obj.i = i; // 修改同一个对象的属性
arr.push(obj); // 将同一个对象的引用推入数组
}
return arr;
}
const resProblematic = testProblematic();
console.log(resProblematic);运行上述代码，您会观察到如下输出：
[{"i":99},{"i":99},{"i":99},...,{"i":99}] // 所有元素都显示 i: 99这与我们期望的 [{"i":0},{"i":1},...,{"i":99}] 大相径庭。问题在于，数组中的所有100个元素都指向了内存中的同一个对象实例，而这个对象实例的 i 属性在循环的最后一次迭代中被设置为 99。
深入解析：JavaScript中的引用类型
要理解上述现象，关键在于掌握JavaScript中数据类型的存储方式：
立即学习“Java免费学习笔记（深入）”；
- 值类型 (Primitives): number, string, boolean, null, undefined, symbol, bigint。这些类型的值直接存储在变量中，赋值操作是复制值的副本。
- 引用类型 (Objects): Object, Array, Function 等。这些类型的值（实际数据）存储在堆内存中，而变量中存储的只是一个指向该内存地址的引用（指针）。赋值操作是复制引用，而不是复制实际数据。
在上面的问题代码中：
- const obj = {}; 在循环外部执行，它在堆内存中创建了一个空对象，并将 obj 变量设置为指向这个对象的引用。
- 在 for 循环的每次迭代中，obj.i = i; 都是在修改 obj 所引用的那个对象的 i 属性。
- arr.push(obj); 操作是将 obj 变量中存储的引用添加到 arr 数组中。这意味着数组的每个位置都存储着同一个内存地址。
因此，当循环结束时，obj 所指向的那个对象已经经过了100次修改，其 i 属性最终定格在 99。由于数组中的所有元素都指向这个唯一的对象，所以它们都反映出 i: 99 这个最终状态。
解决方案：在循环内部创建新对象
要解决这个问题，确保数组中的每个元素都是一个独立的、互不影响的对象实例，我们必须在每次循环迭代时创建一个新的对象。
正确的做法是将对象的声明移动到循环的内部：
function testCorrect() {
const arr = [];
for (let i = 0; i < 100; i++) {
const obj = {}; // 在每次循环迭代时创建新的对象
obj.i = i; // 修改当前新对象的属性
arr.push(obj); // 将新对象的引用推入数组
}
return arr;
}
const resCorrect = testCorrect();
console.log(resCorrect);现在，运行 testCorrect() 函数，您将得到期望的结果：
[{"i":0},{"i":1},{"i":2},...,{"i":99}]工作原理：
- 在每次 for 循环迭代开始时，const obj = {}; 都会在堆内存中创建一个全新的、独立的空对象。
- obj.i = i; 接着为这个新创建的对象设置 i 属性。
- arr.push(obj); 将这个新对象的引用推入数组。由于每次迭代 obj 都指向一个不同的新对象，因此数组中存储的是100个不同的对象引用，每个引用指向一个在特定迭代中创建的对象。
总结与最佳实践
在JavaScript中处理循环和对象时，理解引用类型的行为至关重要。当您需要在循环中构建一个包含多个独立对象实例的数组时，请务必遵循以下原则：
- 在循环内部创建新对象： 确保每次迭代都生成一个全新的对象实例，而不是重复修改和引用同一个对象。
- 区分值类型与引用类型： 牢记对象（包括数组）是引用类型，它们的变量存储的是内存地址，而非实际数据。
- 考虑其他创建对象的方式： 如果您需要基于现有对象创建新对象，并对其进行修改，可以使用 Object.assign({}, originalObj) 或 ES6 的扩展运算符 { ...originalObj } 来创建对象的浅拷贝，然后再进行修改。但在本例中，直接创建空对象更符合需求。
通过在循环内部创建对象，我们可以避免因引用共享而导致的数据覆盖问题，从而确保程序逻辑的正确性和数据的完整性。
