JavaScript循环中向数组添加对象时只返回最后一个值的问题解析-js教程-PHP中文网

JavaScript循环中向数组添加对象时只返回最后一个值的问题解析

霞舞

发布： 2025-09-14 16:43:01

原创

452人浏览过

javascript循环中向数组添加对象时只返回最后一个值的问题解析

本文旨在解释为什么在JavaScript的for循环中，当向数组中添加对象时，最终数组中的所有对象都具有相同的值（通常是循环的最后一个值）。我们将通过一个具体的例子来说明这个问题的原因，并提供正确的解决方案，确保每次循环迭代都能将具有唯一属性值的对象添加到数组中。

问题分析

在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对象，然后将该对象的引用添加到arr数组中。

立即学习“Java免费学习笔记（深入）”；

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

解决方案

为了解决这个问题，需要在每次循环迭代时都创建一个新的对象。这样，每次添加到数组中的都是一个独立的、具有唯一属性值的对象。

修改后的代码如下：

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);

登录后复制

在这个修改后的版本中，obj对象在for循环内部创建，这意味着每次循环迭代都会创建一个新的obj对象。因此，arr.push(obj)会将一个全新的、具有当前循环迭代值的对象添加到数组中。