JavaScript深拷貝方法structuredClone如何使用

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

正文

對于深拷貝，最容易也應(yīng)該是常見的方法是使用 JSON.parse() + JSON.stringify() ，還有一個借助第三方腳本庫 lodash ，其中方法 cloneDeep 可以實現(xiàn)深拷貝。現(xiàn)在可以使用原生的 structuredClone() 方法。

淺拷貝與深拷貝

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

• 淺拷貝：就是只拷貝對象的第一層。引用了更深層次的內(nèi)容。可以使用擴展運算符 ... 或使用 Object.assign() 在 JavaScript 中實現(xiàn)淺拷貝。

• 深拷貝：是指對象的所有層次都被復(fù)制。這是對象的真實副本?？梢允褂?JSON.parse() + JSON.stringify() 執(zhí)行此操作，現(xiàn)在，還可以使用原生方法 structuredClone() 執(zhí)行此操作。

使用 structuredClone 進(jìn)行深拷貝

原生 structuredClone() 方法使用結(jié)構(gòu)化克隆算法創(chuàng)建給定值的深層拷貝。

結(jié)構(gòu)化克隆算法用于復(fù)制復(fù)雜 JavaScript 對象的算法。通過來自 Worker 的 postMessage() 或使用 IndexedDB 存儲對象時在內(nèi)部使用。它通過遞歸輸入對象來構(gòu)建克隆，同時保持先前訪問過的引用的映射，以避免無限遍歷循環(huán)。

語法如下：

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

• value：被克隆的對象?？梢允侨魏谓Y(jié)構(gòu)化克隆支持的類型。

• transfer：為可選參數(shù)，是一個可轉(zhuǎn)移對象的數(shù)組，里面的 值 并沒有被克隆，而是被轉(zhuǎn)移到被拷貝對象上。

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

下面是示例代碼：

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 } }

正如在此代碼片段中所見：

• 更新第一層克隆對象的屬性后，原始屬性不會更新。

• 在更深層次更新屬性后，原始屬性既不更新。發(fā)生這種情況是因為在這種情況下，還復(fù)制了更深層次。

• 而對于淺拷貝對象 shallowCopy 來說，其值會隨著對象 deepCopy 的變化而變化，在項目開發(fā)中很容易帶來BUG

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

到此，相信大家對“JavaScript深拷貝方法structuredClone如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！