Question

我没有运气来创建和访问对象数组。我正在尝试在画布上绘制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个对象：最后一个值是从分配随机数的循环中生成的。请告诉我我做错了！谢谢

Answer 1

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

Answer 2

您正在将同一对象推入数组。将square对象放入for循环中，以便在每次迭代中创建一个新对象。当前，您只会看到10个指向相同参考的元素，其中包含一个带有最后添加值的正方形对象。

var squares = [];  
var squaresToMake = 10;

for ( var loopy = 0; loopy < squaresToMake; loopy++ ) {
 var square =  {cX : 0,  cY : 0,  W : 200,  H : 100}
 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();
}

Answer 3

这样可以满足您的要求。有时，不定义额外的变量会使代码更少出错。

var squares = [];
var squaresToMake = 10;

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

squares.forEach(function(sq) {
  ctx.rect(sq.cX, sq.cY, sq.W, sq.H);
  ctx.fill();
});

Answer 4

以下是用于生成值的ES6方法：

var squares = [];  
var keys = ['cX', 'cY', 'W', 'H']
var squaresToMake = 10;

const newValue = () => Math.floor(Math.random() * new Date().getMilliseconds())
const newSquare = () => keys.reduce((r,c) => Object.assign({[c]: newValue() }, r), {})

Array.from(new Array(squaresToMake), (x) => squares.push(newSquare()) )
console.log(squares)

Javascript：动态创建和访问对象数组

4 个答案: