JavaScript深拷貝方法structuredClone如何使用

本篇內容主要講解“JavaScript深拷貝方法structuredClone如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript深拷貝方法structuredClone如何使用”吧!

正文

對于深拷貝，最容易也應該是常見的方法是使用 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如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！