javascript - Javascript:动态创建和访问对象数组

我没有运气创建和访问对象数组。我正在尝试在画布上绘制10个随机矩形，并将它们的X，Y，宽度和高度存储在数组中，以便以后使用。

var square =  {cX : 0,  cY : 0,  W : 200,  H : 100}
var squares = [];
var squaresToMake = 10;

for ( var loopy = 0; loopy < squaresToMake; loopy++ ) {
 square.cX = Math.floor(Math.random() * 20);
 square.cY = Math.floor(Math.random() * 20);
 square.W = Math.floor(Math.random() * 200);
 square.H = Math.floor(Math.random() * 50);
 squares.push(square);
}

var arrayLength = squares.length;
for (var loopy = 0; loopy < arrayLength; loopy++) {
 ctx.rect(squares[loopy].cX, squares[loopy].cY, squares[loopy].W, squares[loopy].H);
 ctx.fill();
}

我得到的结果是squares数组充满了10个均具有相同值的对象：从分配随机数的循环中生成的最后一个值。请告诉我我做错了！谢谢

最佳答案

您要推送同一对象（正方形）十次，因为对象是通过引用存储/传递的。每次将新值放入“平方”中时，您都在更新同一对象。将“ var square”移动到循环中，以便在每个循环中创建一个新的正方形。