ES5和ES6的深拷贝问题

深拷贝我们知道是引用值的一个问题,因为在拷贝的时候,拷贝的是在内存中同一个引用。所以当其中的一个应用值发生改变的时候,其他的同一个引用值也会发生变化。那么针对于这种情况,我们需要进行深度拷贝,这样就可以做到引用值之间互不干扰的情况。

ES5 深拷贝

function deepClone(origin, target){var target = target || {},toStr = Object.prototype.toString,arrType = '[object Array]';for (const key in origin) {if (origin.hasOwnProperty.call(origin, key)) {if(typeof origin[key] == 'object' && origin[key] !== null){target[key] = toStr.call(origin[key]) === arrType ? [] : {};deepClone(origin[key],target[key])}else{target[key] = origin[key]}}}return target;
}

ES6深拷贝

探究ES6深拷贝的之前,我们先看一下ES6中WeakMap是什么东西?在学习ES6知识中,我们知道Map是解决对象属性只能够是字符串的形式,在ES6中Map的出现,让对象的属性可以是任何类型。而WeakMapMap的主要区别在于前者是弱引用,后者是强引用。并且WeakMap的键名只能够是对象的形式。
那什么是弱引用呢?我们这里弱引用指代的是WeakMap的键名,WeakMap它的键名所引用的对象都是弱引用,即垃圾回收机制不将该引用考虑在内,因此,只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放对该对象所占用的内存。也就是说,一旦不需要,WeakMap里面的键名对象和所对应的键值对就会自动的消失,不用手动删除引用。
下面的例子中,oBtn1oBtn2作为WeakMap储存的两个对象,当外界将oBtn1oBtn2删除之后,那么由于WeakMap中的键名是弱引用的原因,所以导致WeakMap里面的键名对象和所对应的键值对就会自动的消失,不用手动的删除。这也是比较合适WeakMap的使用场景。

const oBtn1 = document.querySelector('#btn1');
const oBtn2 = document.querySelector('#btn2');const oBtnMap = new WeakMap();// WeakMap
oBtnMap.set(oBtn1, handleBtn1Click);
oBtnMap.set(oBtn2, handleBtn2Click);oBtn1.addEventListener('click', oBtnMap.get(oBtn1), false);
oBtn2.addEventListener('click', oBtnMap.get(oBtn2), false);function handleBtn1Click(){}
function handleBtn2Click(){}// 删除节点
oBtn1.remove();
oBtn2.remove();

熟悉WeakMap之后,我们来看ES6深拷贝问题。其实ES6深拷贝面临的问题是引用的循环,我们先来看一个例子。从例子的现象来看,此时由于引用值的相互引用问题,导致test1test2相互引用,无限的引用下去。如果利用上面的ES5的深拷贝方式,那么就会抛出异常,所以我们尝试利用ES6的方式来更好的解决下面的这种问题。

const test1 = {};
const test2 = {};
test1.test2 = test2;
test2.test1 = test1;
console.log(test1);

image.png

function deepClone(origin, hashMap = new WeakMap()) {if (origin == null || typeof (origin) !== 'object') {return origin;}if (origin instanceof Date) {return new Date(origin);}if (origin instanceof RegExp) {return new RegExp(origin);}const hashKey = hashMap.get(origin);if (hashKey) {return hashKey;}const target = new origin.constructor();hashMap.set(origin, target);for (var key in origin) {if (origin.hasOwnProperty(key)) {target[key] = deepClone(origin[key], hashMap);}}return target;
}

image.png

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

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

相关文章

高效篇02-如何选择适合自己的工作/如何选择offer

前言 你有没有遇到以下3个问题。 1、对当前工作不满意,但是好像不知道具体哪里不满意。 2、有想要换工作的想法,但是不知道该换一个什么样的工作。 3、已经在找工作了,说不定手上也有几份 offer 了,但是不知道该如何选择。 在这篇…

Spring是如何解决循环依赖问题的?

目录 问题介绍什么是Spring中的三级缓存?Spring中的三级缓存是如何解决循环依赖问题的?解决Spring循环依赖问题一定需要第三级缓存吗?解决Spring循环依赖问题一定需要第二级缓存吗?什么场景下的Spring循环依赖问题无法解决?采用了构造器的注入方式相互依赖的bean都是原型b…

代码随想录算法训练营DAY7| C++哈希表Part.2|LeetCode:454.四数相加II、383.赎金信、15. 三数之和、18.四数之和

文章目录 454.四数相加II思路C代码 383.赎金信C 代码 15. 三数之和排序哈希法思路C代码 排序双指针法思路去重C代码 18.四数之和前言剪枝C代码 454.四数相加II 力扣题目链接 文章链接:454.四数相加II 视频链接:学透哈希表,map使用有技巧&…

工业物联网关的应用及相关产品-天拓四方

随着科技的飞速发展,智能制造业已成为工业领域的转型方向。在这一转变中,工业物联网关发挥着至关重要的作用。作为连接物理世界与数字世界的桥梁,工业物联网关不仅实现了设备与设备、设备与云平台之间的互联互通,更通过实时数据采…

0.96寸OLED屏调试 ----(四)

所需设备: 1、USB 转 SPI I2C 适配器;内附链接 2、0.96寸OLED显示模块; 备注:专业版、升级版都适用; 继续我们OLED模块的熟悉 : 指令详解 基础指令 1.设置对比度 (81HA[7:0])  …

兼顾陪读|本科学历律师自费赴美国加州大学伯克利分校访学

S律师拟陪同孩子赴海外就读,决定以访问学者身份,申请美国J类签证出国以兼顾陪读。因本科学历,无文章且有地域要求,自己申请无果后做了全权委托。为此我们酌情制定了三条申请策略,最终落实加州大学伯克利分校的访学职位…

AI大模型学习——AI领域技术发展

目录 前言 一、AI大模型学习的理论基础 二、AI大模型的训练与优化 三、AI大模型在特定领域的应用 四、AI大模型学习的伦理与社会影响 五、未来发展趋势与挑战 总结 前言 在当前技术环境下,AI大模型学习不仅要求研究者具备深厚的数学基础和编程能力&#xff…

鸿蒙打包so及引用

一、打包so 1. 环境,DevEco Studio3.1 2. 创建c工程 创建完成后,如下图: 3. 打包so 先配置 然后 二、引用so 1. 新建普工项目 2. 在src同一层级下创建libs文件夹,将so文件拷入 3. 将c工程中的侧接口文件及声明文件复制到项目…

协程库-锁类-实现线程互斥同步

mutex.h:信号量,互斥锁,读写锁,范围锁模板,自旋锁,原子锁 锁 **锁不能进行拷贝操作:**锁是用于管理多线程并发访问共享资源的同步原语。这些锁包括互斥锁(mutex)、读写锁…

AI智能分析网关V4使用GB28181注册到EasyCVR平台的具体步骤

旭帆科技的智能分析网关V4内含近40种智能分析算法,包括人体、车辆、消防、环境卫生、异常检测等等,在消防安全、生产安全、行为检测等场景应用十分广泛。如常见的智慧工地、智慧校园、智慧景区、智慧城管等等,还支持抓拍、记录、告警、语音对…

小黑的Vue前端之路:js中通过构造函数封装,设置对象getter和setter方法

js中构造函数创建对象 JavaScript本身并不是设计成面向对象的,所以没有class之类的关键字用来定义类,但JavaScript本身相当灵活,可以利用function关键字来定义类并创建对象。 例如js创建person对象 通过new关键字,把函数当成了创建对象的构造函数 function Pers…

某康安全开发工程师一面

一、反射型XSS跟DOM型XSS的最大区别 DOM型xss和别的xss最大的区别就是它不经过服务器,仅仅是通过网页本身的JavaScript进行渲染触发的。 二、Oracle数据库了解多吗 平常用的多的是MySQL数据库,像Oracle数据库也有了解,但是用的不多。 三、…

Fastjson反序列化漏洞原理与漏洞复现(基于vulhub靶场)

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收…

【码银送书第十五期】一本书掌握数字化运维方法,构建数字化运维体系

前言 数字化转型已经成为大势所趋,各行各业正朝着数字化方向转型,利用数字化转型方法论和前沿科学技术实现降本、提质、增效,从而提升竞争力。 数字化转型是一项长期工作,包含的要素非常丰富,如数字化转型顶层设计、…

macOS Sonoma 14.4.1 (23E224) 正式版发布,ISO、IPSW、PKG 下载

macOS Sonoma 14.4.1 (23E224) 正式版发布,ISO、IPSW、PKG 下载 2024 年 3 月 26 日凌晨,macOS Sonoma 14.4.1 更新修复了一个可能导致连接到外部显示器的 USB 集线器无法被识别的问题。它还解决了可能导致 Java 应用程序意外退出的问题,并修…

Linux Sftp和Scp

scp 和 sftp 区别 1 scp 能将远程文件复制到另一个远程机,sftp 不能。sftp为 SSH的其中一部分,是一种传输档案至 Blogger 伺服器的安全方式 2.scp 没有删除/创建远程目录功能,sftp 有。scp 在需要进行验证时会要求你输入密码或口令。 3. FT…

Docker部署一个SpringBoot项目(超级详细)

注意:下面的教程主要是针对 Centos7 的,如果使用的其他发行版会有细微的差别,请查看官方文档。 Docker部署一个SpringBoot项目(超级详细) 一、安装Docker1.卸载旧版2.配置Docker的yum库3.安装Docker4.设置开机自启动5.…

通过一篇文章让你了解如何学习C++

如何学习C 前言一、如何学习C二、别人是怎么学C的21天学会C编程能力与编程年龄 三、自己怎么学总结 前言 学习C需要掌握其基础语法、指针和内存管理、STL库使用、面向对象编程等核心概念。可通过阅读权威书籍、在线教程和参考官方文档来系统学习。实践是关键,通过…

网络编程基本概念(一篇文章掌握基本内容的详细概念,IP,端口号,协议,协议分层,封装和分用,客户端和服务端,请求和回应,两台主机的通信)

IP地址 概念 IP地址主要⽤于标识⽹络主机、其他⽹络设备(如路由器)的⽹络地址。简单说,IP地址⽤于定位主机的⽹络地址。 就像我们发送快递⼀样,需要知道对⽅的收货地址,快递员才能将包裹送到⽬的地。 IP的格式 IP地址…

自动化面试常见算法题!

1、实现一个数字的反转,比如输入12345,输出54321 num 12345 num_str str(num) reversed_num_str num_str[::-1] reversed_num int(reversed_num_str) print(reversed_num) # 输出 54321代码解析:首先将输入的数字转换为字符串&#xff…