目錄

• 正文
• 淺拷貝與深拷貝
• 使用 structuredClone 進(jìn)行深拷貝

正文

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

淺拷貝與深拷貝

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

• 淺拷貝：就是只拷貝對(duì)象的第一層。引用了更深層次的內(nèi)容。可以使用擴(kuò)展運(yùn)算符 ... 或使用 Object.assign() 在 JavaScript 中實(shí)現(xiàn)淺拷貝。
• 深拷貝：是指對(duì)象的所有層次都被復(fù)制。這是對(duì)象的真實(shí)副本。可以使用 JSON.parse() + JSON.stringify() 執(zhí)行此操作，現(xiàn)在，還可以使用原生方法 structuredClone() 執(zhí)行此操作。

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

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

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

語法如下：

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

• value：被克隆的對(duì)象。可以是任何結(jié)構(gòu)化克隆支持的類型。
• transfer：為可選參數(shù)，是一個(gè)可轉(zhuǎn)移對(duì)象的數(shù)組，里面的 值 并沒有被克隆，而是被轉(zhuǎn)移到被拷貝對(duì)象上。

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

下面是示例代碼：

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

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

• 更新第一層克隆對(duì)象的屬性后，原始屬性不會(huì)更新。
• 在更深層次更新屬性后，原始屬性既不更新。發(fā)生這種情況是因?yàn)樵谶@種情況下，還復(fù)制了更深層次。
• 而對(duì)于淺拷貝對(duì)象 shallowCopy 來說，其值會(huì)隨著對(duì)象 deepCopy 的變化而變化，在項(xiàng)目開發(fā)中很容易帶來BUG

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

以上就是JavaScript 中深拷貝方法structuredClone的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 深拷貝的資料請(qǐng)關(guān)注其它相關(guān)文章！