时间戳

首页 > 解决方案 > Array.fill 和 [...] 之间的行为差​​异

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

问题描述

尝试在 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

为什么我在初始化数组的方式之间会出现这种不一致的（？！）行为？

标签： javascriptarrays

解决方案

可能这里的问题源于所有行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))

推荐阅读