JavaScript 循环中对象引用问题及解决方案

本文旨在帮助开发者理解 JavaScript 中循环内对象引用的常见陷阱，并提供有效的解决方案。通过示例代码和详细解释，我们将深入探讨为什么在循环中重复使用同一个对象会导致所有数组元素指向相同的值，并演示如何正确地创建和添加新对象，从而获得预期的结果。

问题分析：对象引用与循环

在 JavaScript 中，对象是引用类型。这意味着当你将一个对象赋值给一个变量时，变量实际上存储的是指向该对象内存地址的引用，而不是对象本身的副本。因此，如果在循环中重复使用同一个对象，并将其添加到数组中，那么数组中的所有元素都将指向同一个对象。每次循环修改对象的值，所有引用该对象的数组元素都会受到影响，最终导致所有元素都具有相同的值。

考虑以下代码示例：

function test() {
  const obj = {};
  const arr = [];

  for (let i = 0; i < 100; i++) {
    obj.i = i;
    arr.push(obj);
  }

  return arr;
}

const res = test();
console.log(res);

这段代码的本意是创建一个包含 100 个对象的数组，每个对象都有一个 i 属性，其值从 0 到 99 递增。然而，实际运行结果却并非如此，所有的对象都具有 i: 99 属性。这是因为在循环外部只创建了一个 obj 对象，每次循环只是修改了该对象的值，然后将该对象的引用添加到数组 arr 中。因此，arr 中的所有元素都指向同一个 obj 对象，最终都具有 obj 对象的最终值。

立即学习“Java免费学习笔记（深入）”；

快剪辑

国内⼀体化视频⽣产平台

54

查看详情

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

为了解决这个问题，需要在循环的每次迭代中创建一个新的对象。这样，每个数组元素都将指向不同的对象，从而避免了所有元素都具有相同值的情况。

以下是修改后的代码示例：

function test() {
  const arr = [];
  for (let i = 0; i < 100; i++) {
    const obj = {}; // 在循环内创建新对象
    obj.i = i;
    arr.push(obj);
  }

  return arr;
}

const res = test();
console.log(res);

在这个修改后的代码中，obj 对象在循环的每次迭代中都被重新创建。这意味着每次 arr.push(obj) 都会将一个新对象的引用添加到数组中。因此，数组中的每个元素都指向不同的对象，每个对象都具有不同的 i 属性值。

总结

在 JavaScript 中，理解对象引用至关重要。在循环中处理对象时，务必注意是否需要创建新对象，以避免所有数组元素指向同一个对象的问题。如果在循环中需要创建多个具有不同属性值的对象，则必须在循环的每次迭代中创建新对象，而不是重复使用同一个对象。 记住，在循环内部声明变量（使用 const 或 let）可以确保每次迭代都会创建一个新的变量实例，这对于避免此类问题至关重要。

以上就是JavaScript 循环中对象引用问题及解决方案的详细内容，更多请关注php中文网其它相关文章！