使用Array().fill()创建嵌套数组修改内部元素全部被改动的原因是什么？

问题产生原因 #

Array.fill()方法传入引用类型值时，填充的是该值的内存引用，而非全新的独立副本：

• 代码中Array(2).fill(0)会先在内存中生成唯一的[0, 0]子数组实例
• 外层Array(2).fill(子数组)执行时，是把同一个子数组的引用重复赋值给外层数组的两个索引位，也就是说matrix[0]和matrix[1]本质指向完全相同的数组对象
• 任意修改该子数组的元素，所有引用该内存地址的位置都会同步生效，就会出现你观察到的所有子数组对应位置同步变更的现象

正确实现方案 #

如果要生成每个子数组都独立的二维数组，可以用Array.from在每次迭代时生成全新的子数组：

let matrix = Array.from({length: 2}, () => Array(2).fill(0));
matrix[1][1] = 8
console.log(matrix)
// 输出 [[0, 0], [0, 8]] 符合预期

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