javascript中的structuredClone()克隆方法

前言：

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 对象完全独立，以避免并发访问和意外修改问题。

优点：

1. 完全复制对象：structuredClone 方法能够创建一个原始对象的完全副本，包括对象的原型链、方法等所有属性和方法。
2. 简便易用：使用 structuredClone 方法非常简单，只需将需要拷贝的对象作为参数传入即可。

缺点：

1. 只适用于特定环境：structuredClone 方法目前只在 Web Worker 中以及在某些特定环境下受支持，如 Chrome、Firefox 等。不是所有浏览器和 JavaScript 运行时都支持该方法。
2. 不支持拷贝函数、正则表达式等：structuredClone 方法无法复制函数、正则表达式等特殊类型的对象。只有具有结构化数据的对象才能被成功复制。
3. 不支持循环引用：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那么就占用太多资源了。

到此这篇关于javascript中的structuredClone()克隆方法的文章就介绍到这了,更多相关javascript structuredClone()克隆内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论