Array.prototype.fill 填充值被复用的问题

考察如下示例代码：

// 创建二维数组
const arr = Array(2).fill([]);

// 操作第一个元素
arr[0].push(1);

// 结果是操作了所有数组
console.log(arr); // [ [ 1 ], [ 1 ] ]

和 new 不 new 关系，以下代码问题同样存在

- const arr= Array(12).fill([])
+ const arr= new Array(12).fill([])

arr[0].push(1)

console.log(arr); // [ [ 1 ], [ 1 ] ]

问题出在这个 fill，根据 MDN 的描述

The fill() method changes all elements in an array to a static value
— MDN Array.prototype.fill()

arr.fill(value[, start[, end]]) 这里使用 value 替换数组中的元数，当 value 为对象字面量时，这个对象是被共用的，并没有为每个元素重新创建副本。所以当操作其中一个元素时，所有元素都被影响了。本例中，使用 [] 这个数组字面量填充数组，操作其中任意元数导致所有元素变更。

修正方式则是通过 Array.prototype.map 将每个元素重新赋值，解除这里的复用。

const arr = Array(2)
.fill(1)
.map((item) => []);

arr[0].push(1);

// 结果是操作了所有数组
console.log(arr); // [ [ 1 ], [] ]

之所以在 Array(number) 创建好指定长度的空数组后还需要 fill 填充一下，是因为不填充的话，空数组不能被实际操作，即不能 push 或 map 等，打印出来如下：

[ <2 empty items> ]

Array.prototype.fill 填充值被复用的问题

相关资源