对象数组反复包含相同的对象

Question

我创建多个对象并将它们推送到数组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);
}

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

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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