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

Posted 2021-04-01

我试图将对象推送到一个空数组，其中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）。

答案

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

您可以使用对象破坏将属性从一个对象复制到一个新对象，并将该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);

另一答案

您也可以使用ES6 spread operator：

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

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

  for (var i = 0; i < n; i++) {
    const temp = { ...B }; // object spread
    blockArray.push(temp);
    B.x += 10;
  }
  return blockArray;
}

createBlocks(20);

以上是关于Javascript - 对象值的数组使用迭代的最后一个值的主要内容，如果未能解决你的问题，请参考以下文章

javascript while循环正确迭代但具有相同逻辑的for循环不是，在具有整数值和一些空值的数组上

在 React 中迭代数据数组时呈现 JSX 元素的最有效方法

使用Javascript的数组中嵌套对象值的总和

在Javascript中更新对象数组中的键的最有效方法是啥？ [复制]

Javascript 和 Typescript：使用 for..of 对对象进行迭代

对象值的Javascript数组转换为多维数组