JavaScript之structuredClone现代深拷贝

在JavaScript中,实现深拷贝的方式有很多种,每种方式都有其优点和缺点。今天介绍一种原生JavaScript提供的structuredClone实现深拷贝。

下面列举一些常见的方式,以及它们的代码示例和优缺点:

1. 使用JSON.parse(JSON.stringify(obj))

代码示例:

function deepClone(obj) {return JSON.parse(JSON.stringify(obj));
}

优点:简单易行,对于大多数对象类型有效。

缺点:不能复制原型链,对于包含循环引用的对象可能出现问题。比如以下代码:

const calendarEvent = {date: new Date()
}const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))

最终得到的date不是Data对象,而是字符串。

{"date": "2024-03-02T03:43:35.890Z"
}

这是因为JSON.stringify只能处理基本的对象、数组。任何其他类型都没有按预期处理。例如,日期转换为字符串。Set/Map只是转换为{}

const kitchenSink = {set: new Set([1, 3, 3]),map: new Map([[1, 2]]),regex: /foo/,deep: { array: [ new File(someBlobData, 'file.txt') ] },error: new Error('Hello!')
}const veryProblematicCopy = JSON.parse(JSON.stringify(kitchenSink))

最终得到如下数据:

{"set": {},"map": {},"regex": {},"deep": {"array": [{}]},"error": {},
}

2. 使用递归

代码示例:

function deepClone(obj) {if (obj === null || typeof obj !== 'object') {return obj;}let clone = obj.constructor();for (let attr in obj) {if (obj.hasOwnProperty(attr)) {clone[attr] = this.deepClone(obj[attr]);}}return clone;
}

优点:对于任何类型的对象都有效,包括循环引用。

缺点:对于大型对象可能会消耗大量内存,并可能导致堆栈溢出。

3. 第三方库,如 lodash 的 _.cloneDeep 方法

代码示例:

const _ = require('lodash');
function deepClone(obj) {return _.cloneDeep(obj);
}

优点:支持更多类型的对象和库,例如,支持 Proxy 对象。

缺点:会引入依赖导致项目体积增大。

因为这个函数会导致17.4kb的依赖引入,如果只是引入lodash会更高。

4. 现代深拷贝structuredClone

在现代浏览器中,可以使用 structuredClone 方法来实现深拷贝,它是一种更高效、更安全的深拷贝方式。

以下是一个示例代码,演示如何使用 structuredClone 进行深拷贝:

const kitchenSink = {set: new Set([1, 3, 3]),map: new Map([[1, 2]]),regex: /foo/,deep: { array: [ new File(someBlobData, 'file.txt') ] },error: new Error('Hello!')
}
kitchenSink.circular = kitchenSinkconst clonedSink = structuredClone(kitchenSink)

structuredClone可以做到:

  • 拷贝无限嵌套的对象和数组
  • 拷贝循环引用
  • 拷贝各种各样的JavaScript类型,如DateSetMapErrorRegExpArrayBufferBlobFileImageData

哪些不能拷贝:

  • 函数
  • DOM节点
  • 属性描述、settergetter
  • 对象原型链

所支持的完整列表:

ArrayArrayBufferBooleanDataViewDateError类型(下面具体列出的类型)、MapObject,但仅限于普通对象、原始类型,除了symbol(又名numberstringnullundefinedbooleanBigInt)、RegExpSetTypedArray

Error类型:

Error, EvalError, RangeError, ReferenceError , SyntaxError, TypeError, URIError

Web/API类型:

AudioData, Blob, CryptoKey, DOMException, DOMMatrix, DOMMatrixReadOnly, DOMPoint, DomQuad, DomRect, File, FileList, FileSystemDirectoryHandle, FileSystemFileHandle, FileSystemHandle, ImageBitmap, ImageData, RTCCertificate, VideoFrame

值得庆幸的是 structuredClone 在所有主流浏览器中都受支持,也支持Node.js和Deno。

最后

我们现在终于可以直接使用原生JavaScript中的structuredClone能力实现深度拷贝对象。每种方式都有其优缺点,具体使用方式取决于你的需求和目标对象的类型。

参考

  • Deep Cloning Objects in JavaScript, the Modern Way(www.builder.io/blog/structured-clone)

  • mozilla structuredClone(developer.mozilla.org/zh-CN/docs/Web/API/structuredClone)


看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/718613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录 二叉树第四周

目录 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树 530.二叉搜索树的最小绝对差 501.二叉搜索树中的众树 236.二叉树的最近公共祖先 617.合并二叉树 617. 合并二叉树 简单 给你两棵二叉树: root1 和 root2 。 想象一下,当你将其…

【Rust】——切片

🎃个人专栏: 🐬 算法设计与分析:算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础:Java基础_IT闫的博客-CSDN博客 🐋c语言:c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…

第105讲:Mycat垂直分表实战:从规划到解决问题的完整指南

文章目录 1.垂直分表的背景2.垂直分表案例实战2.1.垂直分表规划2.2.配置Mycat实现垂直分表2.3.重启Mycat2.4.在Mycat命令行中导入数据结构2.5.查看由Mycat分表后每个分片上存储的表2.6.Mycat垂直分表后可能遇到的问题2.7.垂直分表完成 1.垂直分表的背景 我们的商城系统数据库&…

Unity编辑器下如何获取物体(GameObject)的中心位置

注意仅能在编辑器下才能使用该方法 实现方式依靠UnityEditor.Tools提供的参数,具体实现如下: 获取单个物体的中心坐标 public static Vector3 GetGameObjectCenter(GameObject gameObject) {// 选中物体Selection.activeObject gameObject;// 记录当前…

C#中Byte.Parse的用法,如果需要解析含有数字以外的字符,应该如何使用?

在C#中,Byte.Parse用于将字符串解析为byte类型的数字。它的用法如下: byte result Byte.Parse(str);其中,str是要解析的字符串。 如果要解析的字符串含有数字以外的字符,Byte.Parse会抛出一个FormatException异常。为了处理这种…

javaWebssh水利综合信息管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh水利综合信息管理系统是一套完善的web设计系统(系统采用ssh框架进行设计开发),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCA…

MATLAB 实现贝叶斯决策

1. 原理 后验概率: 1.最小错误率决策(最大后验概率决策): 2.最小风险决策: 3.正态分布下的贝叶斯决策 2. 过程 2.1 训练集数据可视化 导入两类训练集数据,并绘制其数据分布,如下:…

云时代【5】—— LXC 与 容器

云时代【5】—— LXC 与 容器 三、LXC(一)基本介绍(二)相关 Linux 指令实战:使用 LXC 操作容器 四、Docker(一)删除、安装、配置(二)镜像仓库1. 分类2. 相关指令&#xf…

JavaSE-09(Java IO精华总结)

Java IO 简单做个总结: 1 .InputStream/OutputStream 字节流的抽象类。2 .Reader/Writer 字符流的抽象类。3 .FileInputStream/FileOutputStream 节点流:以字节为单位直接操作“文件”。4 .ByteArrayInputStream/ByteArrayOutputStream 节点流&#xff…

Running job: job_1709516801756_0003

** yarn运行卡在Running job: job_1709516801756_0003问题解决: ** 在运行wordcount时出现错误,一直卡住 运行命令:hadoop jar share/hadoop/mapreduce/hadoop-mapreduce-examples-3.1.3.jar wordcount /input /output 出现错误&#xff1a…

岭回归算法

回归分析方法是利用数理统计方法分析数据,建立自变量和因变量间的回归模型,用于预测因变量变化的分析方法。其中比较经典的是HoerI和Kennard提出的岭回归算法。岭回归算法是在最小二乘法的基础上引|入正则项,使回归模型具有较好泛化能力和稳定…

经典思路!人参叶际微生物如何发8分文章?

中国中医科学院中药研究所在《Environmental Microbiome》期刊上(IF7.9)发表了关于叶际真菌微生态网络的文章,该研究通过对ITS测序结果和环境因子测定结果以及皂苷含量测定结果进行生信分析,提出了维持微生态网络的稳定性策略和影响皂苷含量的因素。 期刊…

H12-821_113

113.如图所示是路由器现ATE输出的部分信息,以下关于这部分信息的描述,错误的是哪一项? A.display pim rp-info命令用来查看组播组对应的RP信息 B.RP地址是2.2.2.2 C.组地址是225.0.0.0 D.RP的优先级是0 答案:C 注释: …

HCIA-Datacom题库(自己整理分类的)_29_PPP协议判断【6道题】

1.数据链路层采用PPP封装链路两端的IP地址可以不在同一个网段。√ 2.PPP链路两端不在同一网段不能通信。 3.参考以下拓扑及配置,路由器R1与R2通过Serial低速线缆连接,且数据链路层封装使用PPP。当R1和R2的Holdtime不一致时,PPP协商失败&…

python使用常用的路径问题

PythonPath多个路径的使用 通过命令行直接修改 export PYTHONPATH$PYTHONPATH:/path/to/directoryPythonPath多个路径的使用 export PYTHONPATH$PYTHONPATH:/path/to/directory1:/path/to/directory2PythonPath多个路径的使用 python path 移除路径 python path python中…

爬虫实战——麻省理工学院新闻

文章目录 发现宝藏一、 目标二、 浅析三、获取所有模块四、请求处理模块、版面、文章1. 分析切换页面的参数传递2. 获取共有多少页标签并遍历版面3.解析版面并保存版面信息4. 解析文章列表和文章5. 清洗文章6. 保存文章图片 五、完整代码六、效果展示 发现宝藏 前些天发现了一…

jQuery AJAX get() 和 post() 方法—— W3school 详解 简单易懂(二十四)

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求:GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。 GET - 从指定的资源请求数据POST - 向指定的资源提交要处理的数据 GET 基本…

MySQL面试题-日志(答案版)

日志 1、为什么需要 undo log? (1)实现事务回滚,保障事务的原子性。 事务处理过程中,如果出现了错误或者用户执 行了 ROLLBACK 语句,MySQL 可以利用 undo log 中的历史数据将数据恢复到事务开始之前的状态…

ssh无法直接登入Linux超级用户root(23/3/3更新)

说明:不允许ssh用超级用户的身份登入是为了安全性,如果只是学习使用对安全性没啥要求可以按以下操作解除限制 以普通用户登录到服务器后,执行以下命令以编辑 SSH 服务器配置文件 /etc/ssh/sshd_config sudo nano /etc/ssh/sshd_config 此时会…

【C++练级之路】【Lv.10】【STL】priority_queue类和反向迭代器的模拟实现

快乐的流畅:个人主页 个人专栏:《C语言》《数据结构世界》《进击的C》 远方有一堆篝火,在为久候之人燃烧! 文章目录 一、仿函数1.1 仿函数的介绍1.2 仿函数的优势 二、priority_queue2.1 push2.2 pop2.3 top2.4 size2.5 empty 三、…