对象数组一遍又一遍地包含相同的对象答案

【问题标题】：Array of objects contains same object over and over again对象数组一遍又一遍地包含相同的对象
【发布时间】：2018-02-12 22:07:55
【问题描述】：

我创建多个对象并将它们推送到数组objArr：

var objArr = [];
var obj = {};
var height = [9,8,7,3,6,5,2,4];

for (var i = 0; i < 8; i++) {
debugger;
  var mountainH = height[i];

  obj.h = mountainH;
  obj.index = i;

  objArr.push(obj);
}

for (var i = 0; i < objArr.length; i++) {

  alert(objArr[i].h);
}

但正如您所见，每个对象都有相同的值。为什么？

【问题讨论】：

因为你不是在创建一堆对象，只是一遍又一遍地修改同一个对象。
因为您在每次推送时重复使用相同的obj。因此，每次您通过执行obj.h = ... 对其进行变异时，它也会更改所有先前推送的内容。尝试在循环内创建对象。
值更新是通过引用。
您不应该使用带有静态数字的 for 循环。如果数组更改，则必须对其进行修改。使用height.length 避免无意义的问题
Array.push() makes all elements the same when pushing an object的可能重复

标签： javascript

【解决方案1】：

将obj 的初始化放在你的for-loop 中。

您正在为全局变量 obj 重新分配新值。

var objArr = [];

var height = [9,8,7,3,6,5,2,4];

for (var i = 0; i < 8; i++) {
debugger;
  var obj = {};
  var mountainH = height[i];

  obj.h = mountainH;
  obj.index = i;

  objArr.push(obj);
}

for (var i = 0; i < objArr.length; i++) {

  console.log(objArr[i].h);
}

【讨论】：

我之前什至在 jsfiddle 上试过这个，但后来整个网站都冻结了。
@Black 这很奇怪。可能你有更进一步的逻辑。
你可能是对的，可能是它之后的其他代码导致了冻结

【解决方案2】：

因为您的代码中obj 的范围是全局的，它应该包含在 for 循环中。

如果您不在循环内声明它，则该值将在每次迭代时被相同的obj 覆盖，而不是新的内存分配。

var objArr = [];
var height = [9, 8, 7, 3, 6, 5, 2, 4];

for (var i = 0; i < 8; i++) {
  debugger;
  var mountainH = height[i];
  var obj = {};

  obj.h = mountainH;
  obj.index = i;

  objArr.push(obj);
}
console.log(obj);

【讨论】：

【解决方案3】：

如前所述，您需要在循环的每次迭代中初始化一个新对象，否则您的所有数组成员只会共享同一个对象reference。

此外，通过使用.map() 构建数组并完全使用对象文字初始化程序来声明属性，可以大大减少您的代码。

var height = [9,8,7,3,6,5,2,4];
var objArr = height.map((n, i) => ({h: n, index: i}));

console.log(objArr);

这更短更清晰。对于height 中的每个数字，它都会创建一个新对象并将其添加到一个从.map() 返回的新数组中。

使用对象字面量的新功能，它甚至可以更短一些。

var height = [9,8,7,3,6,5,2,4];
var objArr = height.map((h, index) => ({h, index}));

console.log(objArr);

【讨论】：