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那么就占用太多资源了。

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.怪兽

希望大家能够多多支持,我会继续

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值