深入理解JavaScript循环中的对象引用：为何数组元素全部指向最终值？

循环中对象引用的常见陷阱

在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免费学习笔记（深入）”；

1. 值类型 (Primitives): number, string, boolean, null, undefined, symbol, bigint。这些类型的值直接存储在变量中，赋值操作是复制值的副本。
2. 引用类型 (Objects): Object, Array, Function 等。这些类型的值（实际数据）存储在堆内存中，而变量中存储的只是一个指向该内存地址的引用（指针）。赋值操作是复制引用，而不是复制实际数据。

在上面的问题代码中：

• const obj = {}; 在循环外部执行，它在堆内存中创建了一个空对象，并将 obj 变量设置为指向这个对象的引用。
• 在 for 循环的每次迭代中，obj.i = i; 都是在修改 obj 所引用的那个对象的 i 属性。
• arr.push(obj); 操作是将 obj 变量中存储的引用添加到 arr 数组中。这意味着数组的每个位置都存储着同一个内存地址。

因此，当循环结束时，obj 所指向的那个对象已经经过了100次修改，其 i 属性最终定格在 99。由于数组中的所有元素都指向这个唯一的对象，所以它们都反映出 i: 99 这个最终状态。

腾讯混元

腾讯混元大由腾讯研发的大语言模型，具备强大的中文创作能力、逻辑推理能力，以及可靠的任务执行能力。

65

查看详情

解决方案：在循环内部创建新对象

要解决这个问题，确保数组中的每个元素都是一个独立的、互不影响的对象实例，我们必须在每次循环迭代时创建一个新的对象。

正确的做法是将对象的声明移动到循环的内部：

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 } 来创建对象的浅拷贝，然后再进行修改。但在本例中，直接创建空对象更符合需求。

通过在循环内部创建对象，我们可以避免因引用共享而导致的数据覆盖问题，从而确保程序逻辑的正确性和数据的完整性。

以上就是深入理解JavaScript循环中的对象引用：为何数组元素全部指向最终值？的详细内容，更多请关注php中文网其它相关文章！