Question

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

n = 20 ，因此，100（原始x＆＃39; s值）+ 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);

Answer 2

您也可以使用ES6 spread operator：

<div class="row" style="padding-top: 50px">
      <div class="column">
        <img src="images/gallery-1.png">
      </div>
       <div class="column">
        <img src="images/gallery-3.png">
      </div>
     <div class="column">
        <img src="images/gallery-4.png">
      </div>
       <div class="column">
        <img src="images/gallery-2.png">
      </div>
     <div class="column">
        <img src="images/gallery-5.png">
      </div>
    
    
       <div class="column">
        <img src="images/gallery-6.png">
      </div>
     <div class="column">
        <img src="images/gallery-7.png">
      </div>
      <div class="column">
        <img src="images/gallery-8.png">
      </div>
</div>

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

2 个答案: