Javascript - 使用最后一个迭代值的对象值数组

Question

我试图将对象推送到一个空数组，其中它的 x 属性值在每个循环上递增。我使用 console.log(B.x) 来检查它是否进行迭代，但即便如此，每个对象都会将其 x 属性值设置为 300

n = 20，因此，100(原始 x 的值)+ 10(迭代)* 20(循环)= 300

function createBlocks(n) {
  var blockArray = [];

  var B = {
    x: 100,
    y: 100,
    width: 35,
    height: 35,
    color: "brown"
  }

  for (var i = 0; i < n; i++) {
    blockArray.push(B);
    B.x += 10;
    console.log(B.x);
    console.log(blockArray[i]);
  }
  return blockArray;
}

我不明白为什么所有对象的 x 属性都具有相同的值 (300)。

Answer 1

因为您的对象是单个对象，并且您有多个对它的引用。那么为什么要改变一个呢，它改变了实际的对象。您需要为每个项目创建单独的对象。

您可以使用对象解构将属性从一个对象复制到一个新对象中，并将该temp对象推送到数组中。

const blockArray = [];

const B = {
  x: 100,
  y: 100,
  width: 35,
  height: 35,
  color: "brown"
}

for (var i = 0; i < 10; i++) {
  let temp = { ...B };
  blockArray.push(temp);   
  B.x += 10;
}
  
console.log(blockArray);