在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 对象是在循环外部定义的。这意味着在整个循环过程中，只有一个 obj 对象存在。每次循环，obj.i = i 只是修改了同一个对象 obj 的 i 属性值。而 arr.push(obj) 只是将同一个对象 obj 的引用添加到数组 arr 中。因此，循环结束后，数组 arr 中的所有元素都指向同一个对象 obj，而此时 obj.i 的值是循环的最后一个值，即 99。
立即学习“Java免费学习笔记（深入）”；
解决方案
为了解决这个问题，需要在每次循环中都创建一个新的对象。这样，数组中的每个元素都会指向一个不同的对象，每个对象都有其独立的 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 中。
代码解释
const arr = []: 初始化一个空数组 arr，用于存储对象。for(let i = 0; i : 一个循环，从0迭代到99。const obj = {}: 在每次循环迭代中，创建一个新的空对象 obj。obj.i = i: 将当前循环迭代的变量 i 的值赋给对象 obj 的属性 i。arr.push(obj): 将新创建的对象 obj 添加到数组 arr 中。return arr: 函数返回包含100个不同对象的数组。
总结
在JavaScript中，理解对象引用和值的概念至关重要。当向数组中添加对象时，需要确保每次添加的是一个全新的对象，而不是同一个对象的引用。通过在循环内部创建对象，可以避免所有数组元素都指向同一个对象的问题，从而得到预期的结果。
在编写类似的代码时，请务必注意对象的作用域和生命周期，避免出现意外的错误。
以上就是JavaScript循环中向数组添加对象时只保留最后一个值的问题解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520130.html
微信扫一扫 
支付宝扫一扫 
