如何正确初始化并自定义JavaScript二维数组？异常问题解析

你遇到的问题确实和二维数组的初始化方式直接相关，核心原因是**Array.fill()方法会将同一个数组引用重复填充到新数组的每个位置**。

问题代码解析 #

看这段初始化代码：

const vl = new Array(n).fill(Array.from({length: m}, (v, i) => false))

• Array.from(...)创建了一个长度为m、所有元素为false的数组，假设这个数组的引用是arr
• new Array(n).fill(arr)会把arr这个同一个引用赋值给新数组的每一个索引位置，也就是说vl[0]、vl[1]、vl[2]...其实指向的是同一个数组

所以当你执行vl[0][0] = true时，本质是修改了这个共享数组的第一个元素，自然所有行的第一个元素都会变成true，因为它们都是同一个数组的引用。

正确的二维数组初始化方式 #

要让每一行都是独立的数组，需要避免共享引用，改用map方法生成每一行：

const n = 5;
const m = 4;
const vl = new Array(n).fill().map(() => Array.from({length: m}, () => false))
console.table(vl)
vl[0][0] = true
console.table(vl)

这里new Array(n).fill()先创建一个长度为n的空数组（填充undefined），然后map会为每个位置生成一个全新的Array.from(...)数组，这样每一行都是独立的引用，修改单个元素就不会影响其他行了。

或者用更直观的循环方式：

const vl = [];
for (let i = 0; i < n; i++) {
  vl.push(Array.from({length: m}, () => false));
}

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