為什麼 JavaScript 的 `Array.fill()` 建立共享參考而不是副本，以及 `Array.from()` 如何解決這個問題？

Array.fill() 透過引用建立隱藏副本，而不是透過值

在JavaScript 中使用Array.fill 時，可能會遇到一種情況，其中存在多個內部數組矩陣引用相同的底層數組物件。嘗試修改單一元素時，這可能會導致意外行為。

問題

例如，考慮以下程式碼片段：

let m = Array(6).fill(Array(12).fill(0));

此程式碼旨在建立 6x12 矩陣，其中每個元素都初始化為 0。但是，有一個微妙的問題：

m[0][0] = 1;
console.log(m[1][0]); // Outputs 1 instead of 0

之後將 m[0][0] 設為 1，我們期望 m[1][0] 保持為 0。然而，控制台顯示 1。這是因為所有內部數組實際上都引用相同的底層數組物件。

解決方案：Array.from() 來救援

要解決此問題並實現真正的按值複製，可以使用Array.from():

let m = Array.from({length: 6}, e => Array(12).fill(0));

此方法為外部數組中的每個元素建立一個新數組，確保所有內部數組都是不同的物件。因此，修改一個元素不會影響其他元素：

m[0][0] = 1;
console.log(m[0][0]); // Expecting 1
console.log(m[0][1]); // Expecting 0
console.log(m[1][0]); // Expecting 0

以上是為什麼 JavaScript 的 `Array.fill()` 建立共享參考而不是副本，以及 `Array.from()` 如何解決這個問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！