JavaScript中如何仅修改二维数组指定索引位置的元素？

问题根因 #

Array.prototype.fill() 方法传入引用类型值时，填充到数组每一位的是同一个引用地址的对象/数组。上述代码中将同一个长度为2的数组赋值给了外层数组的26个位置，因此修改任意一个子数组的元素，所有子数组都会同步变化。

解决方法 #

方法1：使用Array.from()生成二维数组 #

Array.from 可以在生成数组的过程中为每一位单独创建独立的子数组，不会共享引用：

const a = Array.from({ length: 26 }, () => new Array(2).fill(-1))
a[0][0] = 0
console.log(a)

方法2：结合map方法生成 #

先创建外层数组并填充基础值占位，再通过map遍历为每一位单独生成子数组：

// 必须先填充任意基础值，否则空数组的map不会执行遍历逻辑
const a = new Array(26).fill(null).map(() => new Array(2).fill(-1))

方法3：循环逐个创建子数组 #

兼容性最好、逻辑最直观的写法：

const a = new Array(26);
for(let i = 0; i < 26; i++) {
  a[i] = new Array(2).fill(-1)
}

内容的提问来源于stack exchange，提问作者Goutham Raj R