JS的原生深拷贝——structuredClone

全局的 structuredClone() 方法使用结构化克隆算法将给定的值进行深拷贝。

该方法还支持把原始值中的可转移对象转移到新对象，而不是把属性引用拷贝过去。 可转移对象与原始对象分离并附加到新对象;它们不可以在原始对象中访问被访问到。

const person = {

name: "Timmy",

gradutionDate: new Date('2017-06-17'),

readingBooks: ['Dream of the Red Chamber'],

obj:{

a:1,

n:{

b:2,

c:{

d:3

}

}

}

}

const copied = structuredClone(person)

structuredClone 深拷贝的能力如下：

• Copy 无限嵌套的对象和数组

• Copy 循环引用

• Copy 如下数据类型：

仅支持以下 Error 类型：Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError（或其它会被设置为 Error 的）。

structuredClone 不能做什么：

• Function 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 DATA_CLONE_ERR 的异常。

• 企图去克隆 DOM 节点同样会抛出 DATA_CLONE_ERR 异常。

• 对象的某些特定参数也不会被保留

对比三种深拷贝方法

• JSON.parse(JSON.stringify(obj)) 方法使用简单，且兼容性好，如果你要处理的是简单数据类型的深拷贝，该方法可以 hold 住

• _.copyDeep 兼容性好，功能强大，对于 Function 类型不会报错，但是缺点是需要注意处理 tree-shaking 否则会有性能损耗

• structuredClone 方法是浏览器原生支持的，对于 Function 类型会报错，但最主要的缺点是兼容性问题

对比三种深拷贝方法

• JSON.parse(JSON.stringify(obj)) 方法使用简单，且兼容性好，如果你要处理的是简单数据类型的深拷贝，该方法可以 hold 住

• _.copyDeep 兼容性好，功能强大，对于 Function 类型不会报错，但是缺点是需要注意处理 tree-shaking 否则会有性能损耗

• structuredClone 方法是浏览器原生支持的，对于 Function 类型会报错，但最主要的缺点是兼容性问题