二维数组赋值异常：所有元素被设为最后一行索引原因解析

你的问题出在**Array.fill()方法处理引用类型的特性**上。

看你创建数组的代码：

const matrix = new Array(string1.length).fill(new Array(string2.length).fill(0));

这里fill()的参数是一个新创建的数组（引用类型），fill会把这个数组的同一个引用赋值给外层数组的每一个位置。也就是说，matrix[0]、matrix[1]、matrix[2]其实指向的是同一个数组实例。

所以你在循环里执行matrix[i][j] = i时，本质上是在反复修改同一个数组：

• 当i=0时，把这个数组的所有元素改成0；
• 当i=1时，又把同一个数组的所有元素改成1；
• 最后i=2时，再次把这个数组的所有元素改成2；

最终输出时，外层数组的三个元素都指向这个被最后修改的数组，所以所有行显示的都是[2,2,2,2]。

解决方法 #

创建二维数组时，要确保每一行都是独立的数组实例，避免共享引用。可以用以下两种方式实现：

方法1：使用Array.from

const string1 = "abc";
const string2 = "abcd";

// 每一行都通过回调创建新数组
const matrix = Array.from({ length: string1.length }, () => new Array(string2.length).fill(0));

for (let i = 0; i < string1.length; i++) {
  for (let j = 0; j < string2.length; j++) {
    console.log(i);
    matrix[i][j] = i;
  }
}

console.log(matrix);

方法2：使用map

const string1 = "abc";
const string2 = "abcd";

// 先填充undefined，再map生成独立数组
const matrix = new Array(string1.length).fill().map(() => new Array(string2.length).fill(0));

for (let i = 0; i < string1.length; i++) {
  for (let j = 0; j < string2.length; j++) {
    console.log(i);
    matrix[i][j] = i;
  }
}

console.log(matrix);

这两种方式都会为外层数组的每个位置生成一个新的数组实例，修改某一行时不会影响其他行，最终就能得到你预期的输出。

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