JavaScript深拷貝方法structuredClone使用

2023-02-25 06:02:21

正文

對於深拷貝，最容易也應該是常見的方法是使用 JSON.parse() + JSON.stringify() ，還有一個藉助第三方指令碼庫 lodash ，其中方法 cloneDeep 可以實現深拷貝。現在可以使用原生的 structuredClone() 方法。

淺拷貝與深拷貝

首先，先來了解一下淺拷貝和深拷貝的區別：

淺拷貝：就是隻拷貝物件的第一層。參照了更深層次的內容。可以使用擴充套件運運算元 ... 或使用 Object.assign() 在 JavaScript 中實現淺拷貝。
深拷貝：是指物件的所有層次都被複制。這是物件的真實副本。可以使用 JSON.parse() + JSON.stringify() 執行此操作，現在，還可以使用原生方法 structuredClone() 執行此操作。

使用 structuredClone 進行深拷貝

原生 structuredClone() 方法使用結構化克隆演演算法建立給定值的深層拷貝。

結構化克隆演演算法用於複製複雜 JavaScript 物件的演演算法。通過來自 Worker 的 postMessage() 或使用 IndexedDB 儲存物件時在內部使用。它通過遞迴輸入物件來構建克隆，同時保持先前存取過的參照的對映，以避免無限遍歷迴圈。

語法如下：

structuredClone(value)
structuredClone(value, { transfer })

value：被克隆的物件。可以是任何結構化克隆支援的型別。
transfer：為可選引數，是一個可轉移物件的陣列，裡面的 值 並沒有被克隆，而是被轉移到被拷貝物件上。

返回值：返回值是原始值的深拷貝。

下面是範例程式碼：

const objProfile = { name: "DevPoint", detail: { age: 30 } };
const deepCopy = structuredClone(objProfile);
const shallowCopy = { ...deepCopy };
console.log(shallowCopy); // {"name": "DevPoint", "detail": {  "age": 35 } }
deepCopy.name = "天行無忌";
deepCopy.detail.age = 35;
console.log(objProfile); // {"name": "DevPoint", "detail": {  "age": 30 } }
console.log(deepCopy); // {"name": "天行無忌", "detail": {  "age": 35 } }

正如在此程式碼片段中所見：

更新第一層克隆物件的屬性後，原始屬性不會更新。
在更深層次更新屬性後，原始屬性既不更新。發生這種情況是因為在這種情況下，還複製了更深層次。
而對於淺拷貝物件 shallowCopy 來說，其值會隨著物件 deepCopy 的變化而變化，在專案開發中很容易帶來BUG

structuredClone() 現在可在所有主流瀏覽器和執行時（如 Node.js 或 Deno）的最新版本中使用。

以上就是JavaScript 中深拷貝方法structuredClone的詳細內容，更多關於JavaScript 深拷貝的資料請關注it145.com其它相關文章！

JavaScript深拷貝方法structuredClone使用

目錄

正文

淺拷貝與深拷貝

使用 structuredClone 進行深拷貝

熱門文章