JavaScript原生深拷贝方法 structuredClone使用

structuredClone 简介

structuredClone 是现代浏览器提供的原生 JavaScript 方法，用于深拷贝对象。它可以处理各种复杂数据结构，包括嵌套对象、数组、Date、Map、Set 等，且支持循环引用。

---

语法

const clone = structuredClone(value);

• value: 需要深拷贝的值，可以是任何支持的 JavaScript数据结构。
• 返回值是完全独立的深拷贝对象。

---

支持的类型

structuredClone 支持多种类型，包括：

• 基本数据类型: string, number, boolean, null, undefined, Symbol
• 复杂对象: Object, Array, Date, Map, Set, ArrayBuffer, TypedArray
• 循环引用: 能正确处理循环引用的结构。

---

示例

基本对象深拷贝

const obj = { a: 1, b: { c: 2 } };
const deepCopy = structuredClone(obj);

deepCopy.b.c = 42;
console.log(obj.b.c); // 输出 2，原对象未受影响

处理数组

const arr = [1, [2, 3], 4];
const deepCopy = structuredClone(arr);

deepCopy[1][0] = 42;
console.log(arr[1][0]); // 输出 2，原数组未受影响

支持循环引用

const obj = { a: 1 };
obj.self = obj; // 创建循环引用

const deepCopy = structuredClone(obj);
console.log(deepCopy.self === deepCopy); // 输出 true，循环引用也被正确复制

拷贝特殊对象

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，完全独立
console.log(deepCopy.map.get('key')); // 输出 'value'
console.log(deepCopy.set.has(1)); // 输出 true

---

无法拷贝的类型

以下类型的值不支持 structuredClone，会抛出异常：

• 函数 (Function)
• DOM 节点
• 类实例（例如自定义类对象）

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

---

优势

1. 原生支持：不需要第三方库。
2. 性能优化：相比于 JSON.parse(JSON.stringify) 更快，更安全。
3. 更多支持的类型：支持 Date、Map、Set、循环引用等复杂结构。
4. 不受 JSON 限制：能够处理 undefined 和特殊对象。

---

局限性

1. 不支持拷贝函数、DOM 节点、自定义类实例。
2. 需要现代浏览器支持（较老的环境中不可用）。

---

浏览器兼容性

• structuredClone 是现代浏览器（如 Chrome 98+、Edge 98+、Firefox 94+）中才支持的 API。
• 如果需要在不支持 structuredClone 的环境中使用，可以考虑手动实现深拷贝或使用第三方库（如 Lodash 的 cloneDeep）。

---

总结

structuredClone 是深拷贝对象和数据结构的最佳原生解决方案之一。对于现代开发者来说，它是一个便捷且性能优越的工具，尤其是在处理复杂对象和循环引用时。