本文旨在解释为什么在JavaScript的for循环中，向数组中添加对象时，所有元素最终都显示为循环的最后一个值。文章将分析问题代码，阐述原因，并提供正确的代码示例，帮助开发者避免此类错误。
在JavaScript中，当我们在循环中向数组添加对象时，如果每次循环都修改同一个对象，而不是创建新的对象，最终数组中的所有元素都会指向同一个对象，因此会显示循环的最后一个值。
问题分析
以下面的代码为例：
立即学习“Java免费学习笔记（深入）”；
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对象，这意味着在整个循环过程中，只有一个obj对象被创建。每次循环，obj.i = i 只是在修改同一个对象的i属性。而arr.push(obj) 只是将同一个对象的引用多次添加到数组中。因此，当循环结束时，obj的i属性最终为99，数组中的所有元素都指向这个i属性为99的对象。
为了解决这个问题，我们需要在每次循环中创建一个新的对象。这样，每次添加到数组中的都是一个独立的、具有不同i属性值的对象。
修改后的代码如下：
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);在这个修改后的代码中，const obj = {} 被移动到循环内部。这意味着每次循环都会创建一个新的obj对象。因此，arr.push(obj) 会将不同的对象添加到数组中，每个对象都具有不同的i属性值。
总结与注意事项
当在循环中向数组添加对象时，务必确保每次循环都创建新的对象，而不是修改同一个对象。否则，数组中的所有元素最终都会指向同一个对象，导致意料之外的结果。
这种问题通常发生在处理引用类型（例如对象和数组）时。理解JavaScript中引用类型的特性是避免此类错误的关键。在处理复杂的数据结构时，要特别注意对象和数组的引用关系，避免修改共享对象导致数据错误。
