JavaScript二维数组初始化异常：修改单元素致全行同步变更的解决方法

你的问题出在new Array(n).fill(new Array(n).fill(0))的写法上——fill方法会将同一个数组实例重复填充到外层数组的每个位置，所以修改任意一行的元素都会同步影响所有行。

简洁解决方案 #

方案1：使用Array.from生成独立行

const n = 4;
let board = Array.from({ length: n }, () => new Array(n).fill(0));

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

Array.from的映射函数会为每个索引生成全新的数组实例，从根源避免了引用共享。

方案2：基于原有代码改造（fill+map）

如果想调整你原来的代码，可以先用占位值填充外层数组，再通过map生成独立的内层数组：

const n = 4;
let board = new Array(n).fill(null).map(() => new Array(n).fill(0));

board[0][0] = 1;
console.log(board);

这里fill(null)只是给外层数组每个位置一个初始值，map会遍历每个位置并生成新数组，确保每行独立。

循环是不是最优方案？ #

循环（比如普通for循环）完全可行，且性能和上述数组方法几乎无差异——现代JS引擎对Array.from、map这类方法的优化已经非常到位。

• 如果追求代码简洁性，Array.from或map的写法更紧凑；
• 如果处理超大规模数组，普通for循环可能有极其微小的性能优势，但绝大多数业务场景下可以忽略。

循环写法示例：

const n = 4;
let board = new Array(n);
for (let i = 0; i < n; i++) {
  board[i] = new Array(n).fill(0);
}

这种写法逻辑直白，同样能保证每行都是独立的数组实例。

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