前言：

structuredClone 是 JavaScript 的方法之一，用于深拷貝一個(gè)對(duì)象。它的語(yǔ)法是 structuredClone(obj)，其中 obj 是要拷貝的對(duì)象。structuredClone 方法將會(huì)創(chuàng)建一個(gè)與原始對(duì)象完全相同但是獨(dú)立的副本。

案例：

當(dāng)使用Web Workers進(jìn)行多線程編程時(shí)，structuredClone 方法可以用于將數(shù)據(jù)從主線程傳遞到工作線程，并在工作線程中創(chuàng)建一個(gè)完全獨(dú)立的副本。以下是一個(gè)使用 structuredClone 方法的示例：

// 在主線程中
const myObject = {
  name: 'John',
  age: 30
};

const worker = new Worker('worker.js');
worker.postMessage({ data: structuredClone(myObject) });

// 在工作線程中的 worker.js 文件中
self.addEventListener('message', (event) => {
  const clonedObject = structuredClone(event.data.data);
  // 在工作線程中使用被復(fù)制的對(duì)象
})

在主線程中，我們創(chuàng)建一個(gè)包含名稱和年齡屬性的 myObject 對(duì)象。然后，通過(guò) postMessage 方法將 myObject 對(duì)象傳遞給工作線程。在工作線程中，我們使用 addEventListener 監(jiān)聽(tīng) message 事件，當(dāng)接收到消息時(shí)，使用 structuredClone 方法創(chuàng)建一個(gè) clonedObject 對(duì)象來(lái)對(duì)被傳遞的對(duì)象進(jìn)行深拷貝。

通過(guò)使用 structuredClone 方法，我們確保在工作線程中獲得的 clonedObject 對(duì)象與在主線程中的 myObject 對(duì)象完全獨(dú)立，以避免并發(fā)訪問(wèn)和意外修改問(wèn)題。

優(yōu)點(diǎn)：

1. 完全復(fù)制對(duì)象：structuredClone 方法能夠創(chuàng)建一個(gè)原始對(duì)象的完全副本，包括對(duì)象的原型鏈、方法等所有屬性和方法。
2. 簡(jiǎn)便易用：使用 structuredClone 方法非常簡(jiǎn)單，只需將需要拷貝的對(duì)象作為參數(shù)傳入即可。

缺點(diǎn)：

1. 只適用于特定環(huán)境：structuredClone 方法目前只在 Web Worker 中以及在某些特定環(huán)境下受支持，如 Chrome、Firefox 等。不是所有瀏覽器和 JavaScript 運(yùn)行時(shí)都支持該方法。
2. 不支持拷貝函數(shù)、正則表達(dá)式等：structuredClone 方法無(wú)法復(fù)制函數(shù)、正則表達(dá)式等特殊類型的對(duì)象。只有具有結(jié)構(gòu)化數(shù)據(jù)的對(duì)象才能被成功復(fù)制。
3. 不支持循環(huán)引用：structuredClone 方法無(wú)法處理包含循環(huán)引用的對(duì)象，否則會(huì)拋出異常。因此，在拷貝對(duì)象時(shí)需要注意確保沒(méi)有循環(huán)引用的存在。

對(duì)比_.cloneDeep() 和 Json.parse(JSON.stringify())：

為什么不使用Json.parse(JSON.stringify())？

原因：因?yàn)镴son.parse(JSON.stringify())能做到的structuredClone 也能做到，最關(guān)鍵的是當(dāng)使用Json.parse(JSON.stringify())克隆Date 時(shí)間后的數(shù)據(jù)格式會(huì)變化，而不是原來(lái)的數(shù)據(jù)。
 

const calendarEvent = {
  title: "Builder.io Conf",
  date: new Date(123),
  attendees: ["Steve"]
}

// ?? JSON.stringify 獲取到的date數(shù)據(jù)是字符串格式
const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))

打印出來(lái)的結(jié)果如下：

{
  title: "Builder.io Conf",
  date: "1970-01-01T00:00:00.123Z"
  attendees: ["Steve"]
}

如果使用structuredClone 就不會(huì)出現(xiàn)該問(wèn)題。

為什么不使用_.cloneDeep() ？

如果只是想用這一個(gè)克隆的方法而引用lodash和cloneDeep那么就占用太多資源了。

到此這篇關(guān)于javascript中的structuredClone()克隆方法的文章就介紹到這了,更多相關(guān)javascript structuredClone()克隆內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！