脚本网 > 网络编程 > JavaScript > javascript中的structuredClone()克隆方法

javascript中的structuredClone()克隆方法

admin JavaScript

前言:

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"]
}

//