更改 JS 数组中的单个对象会更改所有元素答案

【问题标题】：Changing single object in JS array changes all elements更改 JS 数组中的单个对象会更改所有元素
【发布时间】：2016-03-02 02:06:00
【问题描述】：

我有一个包含 71 个对象的数组：

var data = []

我使用来自数据库的数据填充此数据，该数据库包含填充 data 的对象的静态和动态元素。

angular.forEach(returnData,function(value,index) {
  if(!Array.isArray(value)) {
    tempObject[key] = value;
  }
});
for(i = 0; i < 71; i++) {
  data.push(tempObject);
}

因此，在 Angular 中，我从返回数据中获取每个静态元素，创建它的一个对象，然后重复同一个对象 71 次。所以数据可能会像这样开始：

[
  {'a': 1,
   'b': 2,
   'd': 7
  },
  {'a': 1,
   'b': 2,
   'd': 7
  }
]

然后我去抓取所有作为数组传回的元素，并尝试将它们添加到data 数组中。

但是，一旦我添加了第一个元素，它就会为数组中的每个对象设置相同的元素。

意味着data[0]['c'] = 11; 将导致：

[
  {'a': 1,
   'b': 2,
   'c': 11,
   'd': 7
  },
  {'a': 1,
   'b': 2,
   'c': 11,
   'd': 7
  }
]

即使我没有触及数组中的第二个索引。当我更新第二个索引时，它也会更新第一个索引。我确定我在这里缺少一些东西。

谢谢！

【问题讨论】：

标签： javascript arrays angularjs

【解决方案1】：

您只是将tempObject 的引用推入data 数组中的71 个不同位置。因此，data[0]、data[1] 等都指向同一个对象，这就是为什么您会看到更改反映在数组中的原因。

如果您想实际推送 71 个单独的实例，则每次将其推送到数组时都必须克隆 tempObject。

我上次检查，克隆一个普通的旧 JavaScript 对象的最有效方法是字符串化然后重新解析：

data.push(JSON.parse(JSON.stringify(tempObject)));

【讨论】：

【解决方案2】：

你自己说过：数组包含同一个对象 71 次。不是一个对象的 71 个副本，而是同一个对象被引用了 71 次。因此，通过任何这些引用更改该对象将反映在所有引用中。

【讨论】：