Javascript多维数组完整列获取设置

Question

我正试图用Javascript制作一个游戏，游戏板被初始化为一个零填充的二维数组。游戏板被初始化为一个零填充的二维数组。然而，当我设置一个点的值时，整个列都被设置为该值。我想这是我初始化数组的方法有问题。

方法一

# initialization
gameState = Array(6).fill(Array(7).fill(0))

# later in the game
gameState[2][4] = 1

# results in complete 4th index column to be assigned the value 1, like so -
0: (7) [0, 0, 0, 0, 1, 0, 0]
1: (7) [0, 0, 0, 0, 1, 0, 0]
2: (7) [0, 0, 0, 0, 1, 0, 0]
3: (7) [0, 0, 0, 0, 1, 0, 0]
4: (7) [0, 0, 0, 0, 1, 0, 0]
5: (7) [0, 0, 0, 0, 1, 0, 0]

方法二

# initialization
let gameState = [];
for (let i=0; i<MAX_ROWS; i++) {
    let row = []
    for (let j=0; j<MAX_COLUMNS; j++) {
       row.push(0)
    }
    gameState.push(row);
}

# again similar assignment
gameState[2][4] = 1

# results in correct state of the array
0: (7) [0, 0, 0, 0, 0, 0, 0]
1: (7) [0, 0, 0, 0, 0, 0, 0]
2: (7) [0, 0, 0, 0, 1, 0, 0]
3: (7) [0, 0, 0, 0, 0, 0, 0]
4: (7) [0, 0, 0, 0, 0, 0, 0]
5: (7) [0, 0, 0, 0, 0, 0, 0]

谁能解释一下我在这里做错了什么？

Answer 1

你的问题很简单。

Array(6).fill(Array(7).fill(0))

让我们来解释一下这是怎么做的。

Array(6)

创建一个有6个项目空间的孔状数组。

.fill(...)

将用你输入的参数来填充这6个洞。

现在问题来了。

在Javascript中，参数是在函数执行之前被评估的。

这意味着（在这个确切的例子中 .fill(...) 只运行一次)，你的代码就和你的数组实例完全一样。

const innerArray = [0,0,0,0,0,0,0];
gameState = Array(6).fill(innerArray);

这意味着它用相同的数组实例填充外数组6次。

你想要的是每次都创建不同的数组。只要这样做就可以了。

gameState = [...Array(6)].map(() => [...Array(7)].map(() => 0))