js 深度克隆

深度克隆(Deep Clone)是指复制一个对象或数组及其所有嵌套结构的副本,使得克隆后的对象与原对象完全独立。JavaScript 提供了一些方法实现深度克隆,但每种方法有其优缺点。

1. 常用方法

1.1 使用 JSON.parseJSON.stringify

这种方法最简单,但有局限性。

const obj = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(obj));console.log(clone); // { a: 1, b: { c: 2 } }
console.log(clone === obj); // false
console.log(clone.b === obj.b); // false
优点
  • 简单易用。
  • 适用于纯 JSON 格式的数据。
缺点
  • 不支持函数、undefinedSymbol、循环引用等。
  • 日期对象会变成字符串,RegExp 对象会丢失。

1.2 使用 structuredClone

structuredClone 是一种内置的深拷贝方法,支持复杂数据结构。

const obj = { a: 1, b: { c: 2 }, d: new Date() };
const clone = structuredClone(obj);console.log(clone); // { a: 1, b: { c: 2 }, d: Date }
console.log(clone === obj); // false
console.log(clone.b === obj.b); // false
优点
  • 支持更多类型(如 DateRegExpMapSet 等)。
  • 处理循环引用。
缺点
  • 不支持旧版本浏览器。
1.3 使用递归实现深度克隆

通过递归遍历对象和数组,手动实现深拷贝。

function deepClone(obj) {if (obj === null || typeof obj !== 'object') {return obj;}if (obj instanceof Date) {return new Date(obj);}if (obj instanceof RegExp) {return new RegExp(obj);}const clone = Array.isArray(obj) ? [] : {};for (const key in obj) {if (obj.hasOwnProperty(key)) {clone[key] = deepClone(obj[key]);}}return clone;
}const obj = { a: 1, b: { c: 2 }, d: new Date() };
const clone = deepClone(obj);console.log(clone); // { a: 1, b: { c: 2 }, d: Date }
console.log(clone === obj); // false
console.log(clone.b === obj.b); // false
优点
  • 完全控制克隆逻辑。
  • 支持特定类型的处理。
缺点
  • 不支持循环引用,需额外处理。

2. 循环引用处理

对于有循环引用的对象,需要使用 WeakMap 来避免递归陷入死循环。

function deepClone (value, cache = new WeakMap ()) {if (typeof value !== "object" || value === null) {return value;}if (cache.has(value)) {return cache.get(value);}const result = Array.isArray(value) ? [] : {};Object.setPrototypeOf(result, Object.getPrototypeOf(value));cache.set(value, result);for (i in value) {if (value.hasOwnProperty(i)) {result[i] = deepClone(value[i], cache);}}return result;
}const obj = { a: 1 };
obj.b = obj; // 循环引用let clone = deepClone(obj);
console.log(clone); // { a: 1, b: [Circular] }const Person = function(name, age) {this.name = name;this.age = age;
}Person.prototype.a = 100;clone = new Person('a', 12)console.log(clone);

3. 方法对比

方法支持类型处理循环引用性能易用性
JSON.parse/stringify仅支持 JSON 格式简单
structuredClone支持大部分类型简单
手动递归可定制支持类型否(需扩展)中等
Lodash支持复杂结构和循环引用简单

推荐

  • 数据结构简单:使用 JSON.parseJSON.stringify
  • 现代浏览器:使用 structuredClone
  • 复杂场景:使用 Lodash 或手动实现带循环引用处理的深拷贝函数。

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

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

相关文章

mapbox基础,加载mapbox官方地图

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象…

汽车IVI中控开发入门及进阶(三十八):手机投屏HiCar开发

手机投屏轻松实现手机与汽车的无缝连接,导航、音乐、通话等功能应有尽有,还支持更多第三方应用,让车载互联生活更加丰富多彩。 HiCar在兼容性和开放性上更具优势。 手机投屏可以说是车机的杀手级应用,大大拓宽了车机的可用性范围。其中华为推出的HiCar就是非常好用的一种。…

优化程序中的数据:从数组到代数

前言 我们往往都希望优化我们的程序,使之达到一个更好的效果,程序优化的一个重点就是速度,加快速度的一个好办法就是使用并行技术,但是,并行时我们要考虑必须串行执行的任务,也就是有依赖关系的任务&#…

Elasticsearch:确保业务规则与语义搜索无缝协作

作者:来自 Elastic Kathleen DeRusso 利用查询规则与语义搜索和重新排序相结合的强大功能。 更多阅读: Elasticsearch 8.10 中引入查询规则 - query rules Elasticsearch 查询规则现已正式发布 - query rules 你是否知道查询规则(query ru…

文本模式下成功。ubuntu P104成功。

https://www.nvidia.com/en-us/drivers/details/226760/ 你下载的 NVIDIA-Linux-x86_64-470.256.02.run 是 NVIDIA 提供的二进制驱动程序安装文件。以下是详细的步骤,帮助你正确安装这个驱动程序。 1. 备份现有驱动(可选) 在安装新驱动之前…

把riscv32位系统弄懂1:riscv32 CPU指令学习

Riscv手册 首先下载手册:文件下载----中国开放指令生态(RISC-V)联盟 从这个页面下载riscv-spec-v2.1中文版 也可以下载中科大的这本:RISC-V手册 Riscv32指令集包括基础指令集和一些扩展指令集,比如在ESP32C3技术手册中,写到E…

全国消费水平系统|Java|SSM|JSP|

【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、Maven、Mysql5.7 4⃣️:技术栈:Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…

达梦数据库-读写分离集群部署

读写分离集群部署 读写分离集群由一个主库以及一个或者多个(最多可以配置 8 个)实时备库组成,基于实时归档实现的高性能数据库集群,不但提供数据保护、容灾等数据守护基本功能,还具有读写操作自动分离、负载均衡等特性。同时可以配置确认监视…

【ALGC】探秘 ALGC—— 卓越数据处理能力的科技瑰宝

我的个人主页 我的领域:人工智能篇,希望能帮助到大家!!!👍点赞 收藏❤ 在大数据时代,如何高效地处理和分析海量数据是一个核心挑战。ALGC(Advanced Learning and Generalized Comp…

如何提高webpack的构建速度?

提高Webpack构建速度是优化Web开发流程的一个重要方面。以下是一些提升Webpack构建速度的方法: 1. 使用适当的mode选项 开发模式(development):默认情况下,Webpack以较慢的速度进行构建,以便于开发。如果…

docker仓库用户认证

保证实验环境纯净删除启动的docker 1.安装建立认证文件的工具包 [rootlocalhost ~]# yum install httpd-tools -y 2.创建目录存放认证文件 [rootlocalhost ~]# mkdir auth [rootlocalhost ~]# htpasswd -Bc auth/.htpasswd lee #-B 强制使用最安全加密方式,默认用m…

在 Windows 下生成 .tgz 文件的方法

方法 1:使用 7-Zip 7-Zip 是一个流行的免费压缩工具,支持生成 .tar.gz 格式。 步骤: 下载并安装 7-Zip。准备好要压缩的文件或文件夹。右键点击文件或文件夹,选择 7-Zip > 添加到压缩文件...。在弹出的对话框中:…

WPSJS:让 WPS 办公与 JavaScript 完美联动

随着办公自动化需求的日益增长,WPS Office 推出了 WPSJS,这是一款强大的开发者工具,允许开发者通过 JavaScript 脚本与 WPS 办公软件进行互动。无论是在表格中自动填充数据、在文档中修改格式,还是在演示文稿中插入动态内容&#…

(OCPP服务器)SteVe编译搭建全过程

注意:建议使用3.6.0,我升级到3.7.1,并没有多什么新功能,反而电表的实时数据只能看到累计电能了,我回退了就正常,数据库是兼容的,java版本换位java11,其他不变就好 背景:…

Git 的基本概念和使用

Git是一个分布式版本控制系统,它可以帮助开发人员追踪和管理代码的修改。下面是Git的基本概念和使用方式的解释: 仓库(Repository):Git使用仓库来存储代码和版本历史记录。仓库可以位于本地计算机上,也可以…

【IMU:视觉惯性SLAM系统】

视觉惯性SLAM系统简介 相机(单目/双目/RGBD)与IMU结合起来就是视觉惯性,通常以单目/双目IMU为主。 IMU里面有个小芯片可以测量角速度与加速度,可分为6轴(6个自由度)和9轴(9个自由度)IMU,具体的关于IMU的介…

Linux 基本使用和程序部署

1. Linux 环境搭建 1.1 环境搭建方式 主要有 4 种: 直接安装在物理机上。但是Linux桌面使用起来非常不友好,所以不建议。[不推荐]。使用虚拟机软件,将Linux搭建在虚拟机上。但是由于当前的虚拟机软件(如VMWare之类的)存在一些bug&#xff…

c++------------------函数

函数定义 语法格式 函数定义包括函数头和函数体。函数头包含返回类型、函数名和参数列表。函数体是用花括号{}括起来的代码块,用于实现函数的功能。例如,定义一个计算两个整数之和的函数: int add(int a, int b) {return a b; }这里int是返回…

如何在centos系统上挂载U盘

在CentOS上挂载NTFS格式的U盘,需要执行一系列步骤,包括识别U盘设备、安装必要的软件、创建挂载点,并最终挂载U盘。以下是在CentOS上挂载NTFS格式U盘的详细步骤: 一、准备工作 确认CentOS版本: 确保你的CentOS系统已经安装并正常运行。不同版本的CentOS在命令和工具方面可能…

Excel中match()函数

函数功能概述 MATCH 函数是 Excel 中用于在指定区域中查找特定值的位置的函数。它返回指定数值在指定数组区域中的位置。这个位置是相对于查找区域的相对位置,而不是绝对的单元格位置。语法结构 MATCH(lookup_value, lookup_array, match_type)lookup_value&#xf…