structuredClone() 是JavaScript的一个内置函数,它提供了深拷贝对象的能力,从ES2021(ECMAScript 2021)标准开始引入。
这个函数使用结构化克隆算法来创建一个目标对象或值的完全独立副本,包括嵌套的对象和数组,甚至是正则表达式、日期对象等特殊类型的正确复制,而不仅仅是基本数据类型的简单赋值。
下面是关于structuredClone()的一些主要优点和缺点:
- 深度拷贝能力:能够创建一个与原始对象完全隔离的拷贝,包括所有层级的嵌套对象和数组,解决了浅拷贝只能复制顶层属性的问题。
- 支持特殊类型:能够正确处理正则表达式、日期、Error对象、Map、Set、WeakMap、WeakSet、Blob、File、FileList、ImageBitmap等特殊类型,这些都是JSON.stringify和JSON.parse等传统方法难以处理的。
- 循环引用处理:
structuredClone()能够妥善处理对象之间的循环引用,不会陷入死循环,而传统的递归拷贝方法容易在这个问题上出错。 - 性能:尽管深拷贝通常比浅拷贝消耗更多资源,但
structuredClone()的实现经过优化,特别是对于大型或复杂的数据结构,它的性能表现通常优于手写递归拷贝函数。 - 简洁的API:使用起来非常方便,只需一行代码即可完成深拷贝,提高了编码效率和代码的可读性。
缺点:
- 兼容性:虽然现代浏览器和Node.js环境已经广泛支持
structuredClone(),但在一些较旧的环境中可能不可用,需要进行兼容性检查或回退到其他深拷贝方法。 - 不能拷贝函数和DOM节点:
structuredClone()不支持函数对象的复制,拷贝函数会导致拷贝后的对象中对应位置为undefined。同样,它也不能复制DOM节点,因为DOM节点不是可序列化或结构化克隆算法支持的对象。 - 资源消耗:相比于浅拷贝,深拷贝尤其是使用
structuredClone()这样的全面拷贝方法,会占用更多的内存资源,对于非常大的对象或频繁的拷贝操作,可能会成为性能瓶颈。 - 不可逆操作:一旦执行,原始数据和拷贝的数据就完全分离,如果错误地修改了拷贝数据,无法通过这个函数恢复到原始状态。
实际使用中,它与序列化+反序列化实现深拷贝相比,仅仅不会忽略 undefined ,但会忽略 Symbol,遇到 function 会报错