ES5和ES6的深拷贝问题

news2024/9/27 21:31:04

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

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.coloradmin.cn/o/1551188.html

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

相关文章

Linux下javaweb项目部署

javaweb项目部署测试 测试环境:centos7 下载安装jdk rpm -ivh jdk-8u131-linux-x64.rpm 下载安装MySQL wget https://downloads.mysql.com/archives/get/p/23/file/mysql-community-server-5.7.33-1.el7.x86_64.rpm https://downloads.mysql.com/archives/get/p…

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

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

前端实现浏览器自定义滚动条

前言: 最近有个项目,产品觉得浏览器默认滚动条太丑了。想美化一下,比如自定义颜色,加上圆角,宽高都要更改一下。我查了资料和文档总结了一下 写法,特此记录以便之后使用。 浏览器滚动条api 总结&#xff…

2024年了,为何 Selenium 依然这么火?

今天给大家带来的主题是自动化测试框架Selenium,话不多说,直接开始! 1.什么是 Selenium 自动化测试 Jason Huggins 于 2004 年创建了一个 JavaScript 框架,旨在将其从重复的手动测试中解放出来。 最初命名为 JavaScriptTestRunn…

基于SpringCloud+Hadoop+Vue实现的企业级网盘系统实现

编程语言:Java、Mybatis、Spring、SpringBoot、SpringCloud、Node、Vue 开发环境:Windows 10 Mysql 开发工具:WebStorm、IDEA编译器、Git、Maven 应用部署服务器:SpringBoot内置Tomcat插件 Node服务器:Node v10.1…

【吊打面试官系列】Redis篇 -Redis 集群如何选择数据库?

大家好,我是锋哥。今天分享关于 【Redis 集群如何选择数据库?】面试题,希望对大家有帮助; Redis 集群如何选择数据库? Redis 集群目前无法做数据库选择,默认在 0 数据库。 Redis 集群不支持使用 SELECT 命令…

RF-TI1352P2—双频多协议高发射功率无线模块

RF-TI1352P2是一款基于TI CC1352P7为核心的双频(Sub-1 GHz 和 2.4 GHz)多协议高发射功率(20 dBm)无线模块;支持IPEX接口和邮票孔两种天线形式;模块除了集成负责应用逻辑的高性能 48 MHz ARM Cortex-M4F 主处…

实验02-1 C#和ASP.NET控件:在Web窗体中输出九九乘法表

【实验内容及要求】 1. 在Web窗体中输出九九乘法表 浏览效果如图2-1所示。 图2-1 在Default.aspx.cs中编写C#代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;public par…

什么是通配符SSL证书?

在当前互联网环境中,数据传输安全至关重要,而通配符SSL证书作为保护多个子域名的理想工具,因其灵活、经济高效的特性而备受瞩目。本文将详细介绍通配符SSL证书的定义、主要特性及其价格区间。 通配符SSL证书的核心特性概述如下: …

【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

霉霉说地道中文,口型、卡点几乎完美,网友:配音时代结束了?

ChatGPT狂飙160天,世界已经不是之前的样子。 新建了人工智能中文站 每天给大家更新可用的国内可用chatGPT资源 更多资源欢迎关注 「给电影配音的时代即将结束了。」 AI 的发展让很多人直呼饭碗被抢了,以前是艺术家、程序员…… 现在配音员也要失业了&a…

763. 划分字母区间(力扣LeetCode)

763. 划分字母区间 题目描述 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段,同一字母最多出现在一个片段中。 注意,划分结果需要满足:将所有划分结果按顺序连接,得到的字符串仍然是 s 。 返回一个表示每个字符串…

Linux:基础IO

回顾C文件接口 stdin & stdout & stderr C 默认会打开三个输入输出流&#xff0c;分别是 stdin, stdout, stderr 仔细观察发现&#xff0c;这三个流的类型都是 FILE*, fopen 返回值类型&#xff0c;文件指针 系统文件I/O 接口介绍 open man open #include <sy…

LeetCode 每日一题 Day 109-115

1969. 数组元素的最小非零乘积 给你一个正整数 p 。你有一个下标从 1 开始的数组 nums &#xff0c;这个数组包含范围 [1, 2p - 1] 内所有整数的二进制形式&#xff08;两端都 包含&#xff09;。你可以进行以下操作 任意 次&#xff1a; 从 nums 中选择两个元素 x 和 y 。 选…

【贫民版】Springboot导入返回错误Excel表格 ---- 通过session存储字节数据,再获取写到响应体中。

目录 前言一、需求二、需求分析三、代码 前言 在开发中会遇到导入文件后&#xff0c;失败的数据需要整理在加上导入失败原因。 按照目前主流的方法&#xff0c;要么通过流输出到response响应体中&#xff0c;或者把失败的excel上传到服务器中&#xff0c;返回url让前端下载。…

pyqt 创建右键菜单栏

class MainModule(QMainWindow, Ui_MainWindow):def __init__(self):super().__init__(parentNone)self.setupUi(self)# 允许出现菜单栏self.tableWidget.setContextMenuPolicy(Qt.CustomContextMenu)# 对空间添加右键菜单栏处理 self.tableWidget.customContextMenuRequested.…

Redis入门到实战-第十九弹

Redis实战热身Count-min-sketch篇 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#xff09;&#xff0c;用作数据库、缓存、…

cuDNN——核心概念

在讨论graph和legacy API的细节之前&#xff0c;这一部分先介绍两者共同的核心概念。 cuDNN Handle cuDNN库暴露了一系列主机API&#xff0c;但是假设所有用到GPU的op&#xff0c;其必要的数据都可以直接从设备上访问。 使用cuDNN的应用必须先调用cudnnCreate()来初始化句柄…

【C/C++】C++中的四种强制类型转换

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

USART发送各种数据类型数据的原理及程序实现

硬件接线&#xff1a; 显示屏的SCA接在B11&#xff0c;SCL接在B10&#xff0c;串口的RX连接A9&#xff0c;TX连接A10。 新建Serial.c和Serial.h文件 在Serial.c文件中&#xff0c;实现初始化函数&#xff0c;等需要的函数&#xff0c;首先对串口进行初始化&#xff0c;只需要…