JavaScript动态二维数组构建：两种实现方式差异解析

两种构建方式的本质区别 #

1. 有效方案：new Array(height).fill().map()的工作逻辑 #

• new Array(height)先创建一个长度为height的空数组，每个元素初始为empty状态
• .fill()无参数调用时，会把所有empty位置填充为undefined
• 后续的.map(() => new Array(width).fill(初始值))会遍历数组的每个元素，为每一行单独创建一个新的数组实例。每一行都是内存中独立的数组对象，修改某一行的元素不会影响其他行。

示例代码：

const width = 3;
const height = 3;
const grid = new Array(height).fill().map(() => new Array(width).fill(0));

grid[0][0] = 1;
console.log(grid);
// 输出：[[1,0,0], [0,0,0], [0,0,0]]

2. 失效方案：new Array(height).fill(row)的问题根源 #

• 数组在JavaScript里属于引用类型，当你用fill(row)时，row是一个已创建的数组实例，fill会把新数组的所有元素都设置为同一个row数组的引用——也就是说，网格里的所有行其实指向内存中的同一个数组对象。
• 不管你修改哪一行的元素，本质上都是在修改那个唯一的数组实例，所以最终所有行的内容会完全同步。

示例代码：

const width = 3;
const height = 3;
const row = new Array(width).fill(0);
const grid = new Array(height).fill(row);

grid[0][0] = 1;
console.log(grid);
// 输出：[[1,0,0], [1,0,0], [1,0,0]]

核心总结 #

fill方法处理引用类型时，只会复制引用而非创建新实例；而map方法通过回调函数为每个元素生成新的数组，确保了每一行的独立性。这就是两种构建方式结果差异的根本原因。

内容的提问来源于stack exchange，提问作者Deamun