如何在 JavaScript 中深度複製物件數組？

在JavaScript 中複製物件陣列：深入探索

挑戰

建立物件的深層副本在JavaScript 中，包含JavaScript 中，包含Java對數組中其他物件的引用的物件數組可能是一項複雜的任務。簡單地複製數組只會複製引用，導致一個數組中的變更影響另一個數組。

structedClone：一種現代解決方案

深度學習的最新且首選方法在JavaScript 中克隆數組就是使用StructuredClone：

array2 = structuredClone(array1);

此功能在現代瀏覽器中可用（Chrome 98、Firefox 94），但需要一個polyfill 來實現更廣泛的相容性。

• 基於 JSON 的深度克隆
• 為了獲得廣泛的瀏覽器支持，可以採用基於 JSON 的技術。

使用JSON.parse 和JSON.stringify

如果您的物件是JSON 可序列化的，則可以使用JSON.parse 和JSON.stringify 進行深度克隆。然而，這種方法有優點和缺點：
• 優點

let clonedArray = JSON.parse(JSON.stringify(nodesArray));

克隆數組及其內容。 簡單的一行解。

clonedArray = nodesArray.map(a => {return {...a}});

缺點

僅適用於 JSON 可序列化物件。

• 效能比使用展開慢

將Spread 運算子與.map 一起使用

對於現代瀏覽器中的淺克隆，Spread 運算子與.map結合使用可以更有效能：

優點

比基於 JSON 的克隆更快。 適用於所有類型缺點僅執行淺克隆（克隆物件的第一級）。 基準：傳播方法的執行速度明顯快於基於 JSON 的克隆對於嵌套深度為 2 的 20 個物件的陣列。

以上是如何在 JavaScript 中深度複製物件數組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！