前言:
structuredClone
是 JavaScript 的方法之一,用于深拷贝一个对象。它的语法是 structuredClone(obj)
,其中 obj
是要拷贝的对象。structuredClone
方法将会创建一个与原始对象完全相同但是独立的副本。
案例:
当使用Web Workers进行多线程编程时,structuredClone
方法可以用于将数据从主线程传递到工作线程,并在工作线程中创建一个完全独立的副本。以下是一个使用 structuredClone
方法的示例:
// 在主线程中
const myObject = {
name: 'John',
age: 30
};
const worker = new Worker('worker.js');
worker.postMessage({ data: structuredClone(myObject) });
// 在工作线程中的 worker.js 文件中
self.addEventListener('message', (event) => {
const clonedObject = structuredClone(event.data.data);
// 在工作线程中使用被复制的对象
})
在主线程中,我们创建一个包含名称和年龄属性的 myObject
对象。然后,通过 postMessage
方法将 myObject
对象传递给工作线程。在工作线程中,我们使用 addEventListener
监听 message
事件,当接收到消息时,使用 structuredClone
方法创建一个 clonedObject
对象来对被传递的对象进行深拷贝。
通过使用 structuredClone
方法,我们确保在工作线程中获得的 clonedObject
对象与在主线程中的 myObject
对象完全独立,以避免并发访问和意外修改问题。
优点:
- 完全复制对象:
structuredClone
方法能够创建一个原始对象的完全副本,包括对象的原型链、方法等所有属性和方法。 - 简便易用:使用
structuredClone
方法非常简单,只需将需要拷贝的对象作为参数传入即可。
缺点:
- 只适用于特定环境:
structuredClone
方法目前只在 Web Worker 中以及在某些特定环境下受支持,如 Chrome、Firefox 等。不是所有浏览器和 JavaScript 运行时都支持该方法。 - 不支持拷贝函数、正则表达式等:
structuredClone
方法无法复制函数、正则表达式等特殊类型的对象。只有具有结构化数据的对象才能被成功复制。 - 不支持循环引用:
structuredClone
方法无法处理包含循环引用的对象,否则会抛出异常。因此,在拷贝对象时需要注意确保没有循环引用的存在。
对比_.cloneDeep() 和 Json.parse(JSON.stringify()):
为什么不使用Json.parse(JSON.stringify())?
原因:因为Json.parse(JSON.stringify())能做到的structuredClone
也能做到,最关键的是当使用Json.parse(JSON.stringify())克隆Date 时间后的数据格式会变化,而不是原来的数据。
const calendarEvent = {
title: "Builder.io Conf",
date: new Date(123),
attendees: ["Steve"]
}
// 🚩 JSON.stringify 获取到的date数据是字符串格式
const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))
打印出来的结果如下:
{
title: "Builder.io Conf",
date: "1970-01-01T00:00:00.123Z"
attendees: ["Steve"]
}
如果使用structuredClone
就不会出现该问题。
为什么不使用_.cloneDeep() ?
如果只是想用这一个克隆的方法而引用lodash和cloneDeep那么就占用太多资源了。