前言：

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

案例：

當(dāng)使用Web Workers進(jìn)行多線程編程時，structuredClone 方法可以用于將數(shù)據(jù)從主線程傳遞到工作線程，并在工作線程中創(chuàng)建一個完全獨(dú)立的副本。以下是一個使用 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ù)制的對象
})

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

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

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

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

缺點(diǎn)：

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

對比_.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ù)據(jù)格式會變化，而不是原來的數(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))

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

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

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

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

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

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

最新評論