JavaScript structuredClone 深拷贝

structuredClone()：原生深拷贝、支持循环引用/Date/Map/Set/ArrayBuffer/Blob、不能拷贝函数/DOM节点、与JSON.parse(JSON.stringify())对比、lodash.cloneDeep · 难度：入门 · +10XP

JavaScript structuredClone —— 终极深拷贝

JSON.parse(JSON.stringify(obj))是最常用的深拷贝方式，但它不能拷贝Date、Map、Set、ArrayBuffer、循环引用等。structuredClone()是浏览器原生的"完美深拷贝"。

基本用法

const obj = {
  date: new Date(),
  map: new Map([['key', 'value']]),
  set: new Set([1, 2, 3]),
  buffer: new ArrayBuffer(8),
};
obj.self = obj; // 循环引用
const cloned = structuredClone(obj); // 完美深拷贝！
console.log(cloned.date instanceof Date); // true
console.log(cloned.map.get('key')); // 'value'

局限性

不能拷贝：函数、DOM节点、Error对象、Symbol、WeakMap。

动手练习

1. 基础练习：用structuredClone深拷贝一个包含Date、Map、Set的复杂对象。
2. 进阶应用：对比structuredClone和JSON方法的性能。
3. 项目实战：在需要深拷贝的场景用structuredClone替代lodash.cloneDeep。