本文探讨了JavaScript循环中将对象推入数组时，所有数组元素最终指向同一对象并显示最后更新值的问题。核心原因是对象在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免费学习笔记（深入）”；
值类型 (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 } 来创建对象的浅拷贝，然后再进行修改。但在本例中，直接创建空对象更符合需求。
通过在循环内部创建对象，我们可以避免因引用共享而导致的数据覆盖问题，从而确保程序逻辑的正确性和数据的完整性。
以上就是深入理解JavaScript循环中的对象引用：为何数组元素全部指向最终值？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520128.html
微信扫一扫 
支付宝扫一扫 
