考察如下示例程式碼：

// 創建二維數組
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()