当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript循环中对象重复只保留最后一个值的原因分析

JavaScript循环中对象重复只保留最后一个值的原因分析

2025-10-05 15:45:37 0浏览收藏

在JavaScript循环中，你是否遇到过向数组添加对象时，所有元素都指向同一个对象，最终值都变成循环结束时的最后一个值？本文深入剖析了这一常见问题的根源：**对象引用**。通过示例代码，我们展示了在循环外部定义对象，导致每次循环只是修改同一对象的值，而数组仅保存了该对象的引用。为了解决这个问题，关键在于**每次循环都创建新的对象**。本文提供了详细的修改方案，即将对象定义移至循环内部，确保数组中的每个元素都指向一个独立的对象，从而避免了值的覆盖。掌握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 对象是在循环外部定义的。这意味着在整个循环过程中，只有一个 obj 对象存在。每次循环，obj.i = i 只是修改了同一个对象 obj 的 i 属性值。而 arr.push(obj) 只是将同一个对象 obj 的引用添加到数组 arr 中。因此，循环结束后，数组 arr 中的所有元素都指向同一个对象 obj，而此时 obj.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 中。