structuredClone 簡介

structuredClone 是現(xiàn)代瀏覽器提供的原生 JavaScript 方法，用于深拷貝對象。它可以處理各種復(fù)雜數(shù)據(jù)結(jié)構(gòu)，包括嵌套對象、數(shù)組、Date、Map、Set 等，且支持循環(huán)引用。

---

語法

const clone = structuredClone(value);

• value: 需要深拷貝的值，可以是任何支持的 JavaScript數(shù)據(jù)結(jié)構(gòu)。
• 返回值是完全獨(dú)立的深拷貝對象。

---

支持的類型

structuredClone 支持多種類型，包括：

• 基本數(shù)據(jù)類型: string, number, boolean, null, undefined, Symbol
• 復(fù)雜對象: Object, Array, Date, Map, Set, ArrayBuffer, TypedArray
• 循環(huán)引用: 能正確處理循環(huán)引用的結(jié)構(gòu)。

---

示例

基本對象深拷貝

const obj = { a: 1, b: { c: 2 } };
const deepCopy = structuredClone(obj);deepCopy.b.c = 42;
console.log(obj.b.c); // 輸出 2，原對象未受影響

處理數(shù)組

const arr = [1, [2, 3], 4];
const deepCopy = structuredClone(arr);deepCopy[1][0] = 42;
console.log(arr[1][0]); // 輸出 2，原數(shù)組未受影響

支持循環(huán)引用

const obj = { a: 1 };
obj.self = obj; // 創(chuàng)建循環(huán)引用const deepCopy = structuredClone(obj);
console.log(deepCopy.self === deepCopy); // 輸出 true，循環(huán)引用也被正確復(fù)制

拷貝特殊對象

const special = {date: new Date(),map: new Map([['key', 'value']]),set: new Set([1, 2, 3])
};const deepCopy = structuredClone(special);console.log(deepCopy.date === special.date); // 輸出 false，完全獨(dú)立
console.log(deepCopy.map.get('key')); // 輸出 'value'
console.log(deepCopy.set.has(1)); // 輸出 true

---

無法拷貝的類型

以下類型的值不支持 structuredClone，會拋出異常：

• 函數(shù) (Function)
• DOM 節(jié)點(diǎn)
• 類實(shí)例（例如自定義類對象）

const fn = { a: () => {} }; 
structuredClone(fn); // 拋出異常：Uncaught DOMException

---

優(yōu)勢

1. 原生支持：不需要第三方庫。
2. 性能優(yōu)化：相比于 JSON.parse(JSON.stringify) 更快，更安全。
3. 更多支持的類型：支持 Date、Map、Set、循環(huán)引用等復(fù)雜結(jié)構(gòu)。
4. 不受 JSON 限制：能夠處理 undefined 和特殊對象。

---

局限性

1. 不支持拷貝函數(shù)、DOM 節(jié)點(diǎn)、自定義類實(shí)例。
2. 需要現(xiàn)代瀏覽器支持（較老的環(huán)境中不可用）。

---

瀏覽器兼容性

• structuredClone 是現(xiàn)代瀏覽器（如 Chrome 98+、Edge 98+、Firefox 94+）中才支持的 API。
• 如果需要在不支持 structuredClone 的環(huán)境中使用，可以考慮手動實(shí)現(xiàn)深拷貝或使用第三方庫（如 Lodash 的 cloneDeep）。

---

總結(jié)

structuredClone 是深拷貝對象和數(shù)據(jù)結(jié)構(gòu)的最佳原生解決方案之一。對于現(xiàn)代開發(fā)者來說，它是一個便捷且性能優(yōu)越的工具，尤其是在處理復(fù)雜對象和循環(huán)引用時。