JavaScript循环中数组元素总是最后一个值的原因及解决方法-js教程-PHP中文网

JavaScript循环中数组元素总是最后一个值的原因及解决方法

花韻仙語

发布： 2025-09-14 18:02:01

原创

691人浏览过

javascript循环中数组元素总是最后一个值的原因及解决方法

本文旨在解释为什么在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的对象。

因赛AIGC

因赛AIGC解决营销全链路应用场景

查看详情

解决方法

为了解决这个问题，我们需要在每次循环中创建一个新的对象。这样，每次添加到数组中的都是一个独立的、具有不同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中引用类型的特性是避免此类错误的关键。在处理复杂的数据结构时，要特别注意对象和数组的引用关系，避免修改共享对象导致数据错误。

以上就是JavaScript循环中数组元素总是最后一个值的原因及解决方法的详细内容，更多请关注php中文网其它相关文章！