概述: structuredClone 是一种新的 JavaScript 原生方法,用于创建一个对象的深拷贝。与传统的浅拷贝方法(如 Object.assign 或数组的 slice)不同,structuredClone 可以递归地拷贝对象,包括其中的嵌套对象、数组、Date、Map、Set、ArrayBuffer 等复杂数据结构
structuredClone 与传统拷贝方式的区别:
1.传统拷贝:
-
浅拷贝: 使用 Object.assign 或者扩展运算符(…)进行拷贝时,只有对象的第一层会被拷贝,嵌套的对象或数组将是引用传递。
-
递归深拷贝: 使用递归实现深拷贝,能够拷贝嵌套对象,但是无法处理一些特殊的对象类型(如 Date、RegExp、Map 等)。
传统拷贝可以跳转 js 深浅拷贝的区别和实现
2.structuredClone:
- 深拷贝: structuredClone 会递归地复制整个对象,包括所有嵌套的对象和数组。
- 处理特殊对象: 它可以处理包括 Date、RegExp、Map、Set、ArrayBuffer 等对象类型,避免了传统方法中的不足。
以下是structureClone的使用方法:
let a = {b: {c: 1}};
let b = structuredClone(a);
console.log(b, a===b, a.b ===b.b)
注意事项:
1.不能克隆某些类型:
- Function(函数)
- RegExp(正则表达式)
- Error 对象
- WeakMap 和 WeakSet
- 带有循环引用的对象
2.性能: 尽管 structuredClone 提供了一个方便的深拷贝解决方案,但它的性能开销可能会比浅拷贝方法大。因此,应该根据实际需求评估是否使用它,尤其是在处理非常大的对象时。
3.兼容性: structuredClone 是 ECMAScript 2021(ES12)引入的标准方法,在现代浏览器中已经得到了广泛支持