本文旨在帮助开发者理解 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免费学习笔记（深入）”；
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
解决方案：循环内创建新对象
为了解决这个问题，需要在循环的每次迭代中创建一个新的对象。这样，每个数组元素都将指向不同的对象，从而避免了所有元素都具有相同值的情况。
以下是修改后的代码示例：
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）可以确保每次迭代都会创建一个新的变量实例，这对于避免此类问题至关重要。
