Array.fill和[...]之间的行为差​​异

Question

当尝试在Node / Chrome中生成并使用对称生成的2D矩阵时，出现奇怪的行为。生成方法如下所示。

const test=(f) => {
    // Omitted
    // Could provide full source if needed but it's not small
}
const gen=(boxSize)=>{
    const boardSize = boxSize ** 2;
    return new Array(boardSize).fill(new Array(boardSize).fill(0));
}

console.log(gen(2)); // [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]
test(gen(2)); // fails
test(JSON.parse(JSON.stringify(gen(2)))); // passes
test([[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]); // passes

为什么在初始化数组的方式之间却出现这种不一致的行为？

Answer 1

这里的问题可能是由于gen(2)的所有行都是对同一数组的引用。因此，修改任何行实际上都会修改每一行；毫无疑问，这不是您想要的行为。

这是因为Array.fill方法将对填充数组的每个元素使用完全相同的东西。请注意，您要填充的内容是对另一个数组的引用，因此每个元素都将是对该同一数组的引用。

要解决此问题，我建议在.map顶部使用.fill：

return new Array(boardSize).fill().map(() => new Array(boardSize).fill(0))

或使用Array.from：

return Array.from({length: boardSize}, () => new Array(boardSize).fill(0))