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社区

在线AI创意灵感社区

61

查看详情

修改后的代码如下：

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)会将一个全新的、具有当前循环迭代值的对象添加到数组中。

总结

在JavaScript中，理解对象是引用类型非常重要。当需要在循环中向数组添加对象时，务必确保在每次循环迭代时都创建一个新的对象，以避免所有数组元素都指向同一个对象的问题。 否则，数组中的所有元素都将具有该对象的最终值。通过在循环内部创建对象，可以确保数组中的每个对象都具有唯一的属性值。