求助：Array.prototype.fill预填充数组后push操作异常，元素全部被修改

嘿，这个问题我太熟悉了！其实这不是fill方法的“异常行为”，而是它的预期特性——根源在于JavaScript里引用类型的工作方式。

问题的本质 #

当你执行类似const arr = new Array(3).fill([])这样的代码时，你可能以为fill会给数组的每个位置都创建一个新的空数组，但实际上它做的是：把同一个空数组的引用复制到了数组的每一个索引位置。

你可以用下面的代码验证这一点：

const arr = new Array(3).fill([]);
console.log(arr[0] === arr[1]); // 输出: true
console.log(arr[1] === arr[2]); // 输出: true

三个位置的子数组其实指向的是内存中同一个数组对象，所以不管你对哪一个子数组执行push（或者其他修改操作），本质上都是在修改那个唯一的数组对象，自然所有位置都会看到变化。

解决方法 #

要创建一个包含多个独立空数组的数组，你需要确保每个子数组都是新的引用，可以用以下两种常见方式：

1. 使用map方法：

const arr = new Array(3).map(() => []);
// 现在每个子数组都是独立的
arr[0].push("hello");
console.log(arr); // 输出: [ ["hello"], [], [] ]

map会遍历数组的每个位置，每次调用回调函数都会返回一个新的空数组，所以每个位置的引用都是独立的。

2. 使用Array.from：

const arr = Array.from({ length: 3 }, () => []);
arr[1].push("world");
console.log(arr); // 输出: [ [], ["world"], [] ]

Array.from的第二个参数是映射函数，同样会为每个位置生成新的空数组。

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