如何填充这个锯齿状阵列

Question

在函数范围之外时，Tiles[[]]将丢失其所有值。

var Tiles= [[]];
function drawGrid(){
Grid=true;
// for the amout of rows
for (let rowcount = 0; rowcount < amountOfrows; rowcount++) {
ctxB.lineWidth = 1;

// filling the rows
// check for (un)even
if(rowcount%2==0){
for (let boxcount = 0; boxcount < amountOfHorBoxes; boxcount++) {
ctxB.strokeStyle = "black";
ctxB.fillStyle = "white";
ctxB.beginPath();
ctxB.rect(addHorBox, addVertBox, boxsize, boxsize);
ctxB.fill();
ctxB.closePath();
ctxB.stroke();
Tiles[rowcount[boxcount]]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};
//console.log('Tiles:',Tiles[rowcount[boxcount]]);

addHorBox+=boxsize;
}
}else{
for (let boxcount = 0; boxcount < amountOfHorBoxes; boxcount++) {
ctxB.strokeStyle = "black";
ctxB.fillStyle = "white";
ctxB.beginPath();
ctxB.rect(addHorBox+boxsize/2, addVertBox, boxsize, boxsize);
ctxB.fill();
ctxB.closePath();
ctxB.stroke(); 
Tiles[rowcount[boxcount]]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};
//console.log('Tiles:',Tiles[rowcount[boxcount]]);
addHorBox+=boxsize;
}
}
addHorBox=0;
addVertBox+=boxsize;
}
}

我还不能完全检查是否正确填充了数组，但无论如何，它不会包含超出其范围的值。我该怎么做？

Answer 1

在您的代码中，您正在访问Tiles数组，如下所示：

Tiles[rowcount[boxcount]]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};

因此，您使用的索引是存储在rowcount的boxcount属性中的值，即与执行相同

let index = rowcount[boxcount];
Tiles[index]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};

由于rowcount[boxcount]的值未定义，因此您将对象存储在Tile[undefined]中。

为了访问二维数组，您需要执行以下操作：

Tiles[rowcount][boxcount]={x1: addHorBox, y1: boxsize*rowcount, x2: addHorBox+boxsize, y2: boxsize*(rowcount+1)};

此外，在初始化数组时，最初只有一行可用：Tiles = [[]];

我建议将Tiles初始化为空数组：Tiles = [];

然后，对于每一行，将一个新的空数组推入Tiles:

for (let rowcount = 0; rowcount < amountOfrows; rowcount++) {
ctxB.lineWidth = 1;
Tiles.push([]);
...
}