【拓展】深克隆还可以这样实现

大家好我是蜗牛,倾心于用直白的大白话来解释清楚复杂的问题的,让新手也能很好的接受。

深克隆已经是js中烂大街的问题了,说到深拷贝,你脑海中就第一时间浮现出递归,递归确实是用的最多的方法,这篇文章我们主要一起探究一下除了递归,另外两种实现深拷贝的手段,拓展一下视野

相比于JSON.parse(JSON.stringify(obj)) 不能处理循环引用,不能处理Symbol类型,接下来的这两种方式效果如何?

1. structuredClone 方法

structuredClone 是 HTML Living Standard 规范中定义的一个 JavaScript 方法,用于深拷贝复杂的数据结构,包括对象、数组、BlobFileImageData 等。该方法主打就是一个

这个方法通常用于 Web Workers 中,以及一些与浏览器的 API 交互时,用于将数据从一个上下文(通常是主线程)传递到另一个上下文(通常是 Web Worker)。它的作用类似于深拷贝,但它能够处理一些特殊的浏览器对象和数据类型,而通常的深拷贝方法可能无法处理。
Web Worker 不熟悉的可以去看我上一篇文章# 多线程做图片灰度化处理 其中介绍了什么 Web Worker 的用法, 或者你不用在乎它

对于这个方法,我们用起来非常的方便

通常我们可以在 Web Worker 中这样使用它

另一个你比较关心的问题,它能处理循环引用吗?

ok,没有问题!!!

当然,尽管structuredClone方法在某些情况下非常有用,但它也有一些限制和缺点:

  1. 不适用于所有数据类型structuredClone可以处理许多常见的数据类型,但不是所有 JavaScript 对象和数据类型都能被结构化克隆。例如,它无法处理一些特殊的对象,如函数、正则表达式和DOM元素。如果你的数据包含这些类型,你仍然需要手动处理它们。
  2. 性能开销structuredClone可以在某些情况下比手动深拷贝更慢。这是因为它需要对整个数据结构进行序列化和反序列化操作,这可能会导致性能开销。对于大型或复杂的数据结构,这个开销可能会显著影响性能。
  3. 浏览器兼容性 :尽管structuredClone是HTML Living Standard的一部分,但并不是所有浏览器都完全支持它。在某些浏览器中,可能会存在一些限制或差异。因此,在跨浏览器开发中,你可能需要考虑备用方法来处理数据传输和深拷贝。

2. MessageChannel 方法

MessageChannel 是用于在不同的 JavaScript 上下文之间进行通信的 API,通常也是在 Web Workers 中使用。这里我们可以借助它的特性

它就像是一个隧道,有两端开口,port1口 负责发送数据,port2口 负责接收数据,这个发送和接收的过程中,自动实现了深拷贝的效果

那么它能处理循环引用的问题吗

也是ok的!

当然,尽管MessageChannel方法的使用非常的巧妙,但它也存在关键性的问题:

  1. 不能处理 Symbol 类型的数据
  1. 因为是异步方法,所有使用起来稍显得繁琐一点

3. 写在最后

这两种方式也都能实现对象的深拷贝,但也都或多或少存在一点缺点,我们实际开发过程中一般还是 lodash 或者 递归的方案用的较多一些。但作为学习,拓展思路还是比较不错的,面试中也可以跟面试官多吹一波,酌情考量是否可用于生产中

相关推荐
敲敲了个代码3 分钟前
前端指纹技术是如何实现的?(Canvas、Audio、硬件API 核心原理解密)
前端·javascript·学习·算法·面试·web
Amumu121387 分钟前
Vue简介
前端·javascript·vue.js
放逐者-保持本心,方可放逐8 分钟前
React核心组件 及 钩子函数应用
前端·javascript·react.js·非阻塞更新·延迟更新·同步更新
小宇的天下8 分钟前
Calibre nmDRC-H 层级化 DRC
java·服务器·前端
怒放de生命201016 分钟前
前端子包+docker流水线部署+nginx代理部署
前端·nginx·docker
2501_9011478318 分钟前
多头注意力机制(Multi-Head Attention)知识笔记(附面试核心考点)
笔记·面试·职场和发展
唐钰小球18 分钟前
layer.prompt文本框为空时也能提交的方法
javascript·prompt·layui
0思必得025 分钟前
[Web自动化] Selenium浏览器对象属性
前端·python·selenium·自动化·web自动化
小二·30 分钟前
Python Web 开发进阶实战:边缘智能网关 —— 在 Flask + Vue 中构建轻量级 IoT 边缘计算平台
前端·python·flask
源代码•宸32 分钟前
Leetcode—3314. 构造最小位运算数组 I【简单】
开发语言·后端·算法·leetcode·面试·golang·位运算