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.rhkb.cn/news/289204.html

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

相关文章

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

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

#Linux(make工具和makefile文件以及makefile语法)

(一)发行版:Ubuntu16.04.7 (二)记录: (1)make为编译辅助工具,解决用命令编译工程非常繁琐的问题 (2)在终端键入make即可调用make工具&#xff0…

Linux:环境变量的特性及获取

目录 一、环境变量基本概念 1.1命令行参数 1.2常见环境变量 二、环境变量相关指令 创建本地变量 三、环境变量通常是具有全局属性的 一、环境变量基本概念 环境变量(environment variables)不是一个而是一堆,彼此之间其实没有关系。本质上是为了解决不同场景下…

ebpf的CO-RE功能介绍

目录 CO-RE 引入 思路 介绍 使用 CO-RE 引入 因为ebpf需要深入内核,但内核中的数据结构很可能在不同版本中定义不同(尤其是结构体,可能会增加某个字段) 但我们在访问结构体时,比如一般通过指针偏移量来拿到特定变量的首地址 如果定义变化,偏移量就会变化,就会需要多份ebp…

算法打卡day20

今日任务: 1)669.修剪二叉搜索树 2)108.将有序数组转换为二叉搜索树 3)538.把二叉搜索树转换为累加树 669.修剪二叉搜索树 题目链接:669. 修剪二叉搜索树 - 力扣(LeetCode) 给你二叉搜索树的根…

【机器学习】代价函数

🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:机器学习 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进…

是德科技安捷伦 E5052B信号源分析仪

181/2461/8938产品概述: Keysight E5052B(安捷伦)信号源分析仪,10 MHz 至 7 GHz,具有许多增强的性能特性。它在表征 VCO 或其他类型的高频信号源以及高速数据通信系统中的时钟抖动评估方面提供了世界上最高的测量吞吐…

Vuepress 2从0-1保姆级进阶教程——美化与模板

Vuepress 2 专栏目录 1. 入门阶段 Vuepress 2从0-1保姆级入门教程——环境配置篇Vuepress 2从0-1保姆级入门教程——安装流程篇Vuepress 2从0-1保姆级入门教程——文档配置篇Vuepress 2从0-1保姆级入门教程——范例与部署 2.进阶阶段 Vuepress 2从0-1保姆级进阶教程——全文搜索…

一分钟开服 《幻兽帕鲁》游戏专属服务器by京东云主机

使用京东云服务器搭建幻兽帕鲁Palworld游戏联机服务器教程,非常简单,京东云推出幻兽帕鲁镜像系统,镜像直接选择幻兽帕鲁镜像即可一键自动部署,不需要手动操作,真正的新手0基础部署幻兽帕鲁,阿腾云atengyun.…

精品凉拌菜系列热卤系列课程

这一系列课程涵盖精美凉拌菜和美味热卤菜的制作技巧。学员将学习如何选材、调味和烹饪,打造口感丰富、色香俱佳的菜肴。通过实践训练,掌握独特的烹饪技能,为家庭聚餐或职业厨艺提升增添亮点。 课程大小:6.6G 课程下载&#xff1…

【测试开发学习历程】MySQL增删改操作 + 备份与还原 + 索引、视图、存储过程

前言: SQL内容的连载,到这里就是最后一期啦! 如果有小伙伴要其他内容的话,我会追加内容的。(前提是我有学过,或者能学会) 接下来,我们就要开始python内容的学习了 ~ ~ 目录 1 …

蓝鹏为何专注智能测量仪的加工定制?

在这个日新月异的科技时代,自动化工厂层出不穷,并且是在不断地升级改造,为了产品的高速高质高效的自动化生产,智能测量仪的重要性不言而喻。智能测量仪的种类很多,蓝鹏一直致力于专业仪器定制,但你有没有想…

STM32通用输入输出

一、GPIO介绍 功能: 输入(Input): 浮空:输入没有接上拉和下拉 模拟:输入没有走上拉和下拉走的是模拟输入 上拉:上拉电阻是合上的,接入点为上拉电阻 下拉:下拉电阻是合上的 输…

蓝桥杯 - 小明的背包1(01背包)

解题思路: 本题属于01背包问题,使用动态规划 dp[ j ]表示容量为 j 的背包的最大价值 注意: 需要时刻提醒自己dp[ j ]代表的含义,不然容易晕头转向 注意越界问题,且 j 需要倒序遍历 如果正序遍历 dp[1] dp[1 - vo…

Radio Silence for mac 好用的防火墙软件

Radio Silence for Mac是一款功能强大的网络防火墙软件,专为Mac用户设计,旨在保护用户的隐私和网络安全。它具备实时网络监视和控制功能,可以精确显示每个网络连接的状态,让用户轻松掌握网络活动情况。 软件下载:Radio…

mysql公用表表达式CTE

公用表达式是MySQL8.0的新特性,它是一个命名的临时结果集,作用范围是当前语句。 可以理解成为当前sql语句定义了一个视图,sql语句的任何地方都可以使用这个视图,如果被多次使用就体现出了公用表达式的特点公用。 依据语法结构和执…

从零开始的深度学习入门指南

1. 引言 1.1. 深度学习的定义和背景:深度学习是一种复杂的机器学习技术,其目的是训练一个深度神经网络来解决现实世界中的各种问题。深度学习由一组相互连接的神经元组成,每个神经元都有自己的权重,这些权重被优化以实现预测和分…

2024河北煤炭装备展览会|河北采煤装备展会|河北煤博会

2024中国(石家庄)国际煤炭装备及矿山设备博览会 时间:2024年7月4-6日 地点:石家庄国际会展中心.正定在快速发展的科技时代,能源行业始终是国家发展的重要支柱。作为传统的能源巨头,煤炭产业在面临转型升…

git最常用的命令与快捷操作说明

git最常用的命令与快捷操作说明 最常用的git三条命令1、git add .2、git commit -m "推送注释"3、git push origin 远程分支名:本地分支名 其他常用命令本地创建仓库分支删除本地指定分支切换本地分支合并本地分支拉取远程仓库指定分支代码过来合并推送代码到远程分支…

Gitlab 实现仓库完全迁移,包括所有提交记录、分支、标签

1 方案一&#xff1a;命令 cd <项目目录> git fetch --all git fetch --tags git remote rename origin old-origin #可以不保留 git remote add origin http://***(项目的新仓库地址) #git remote set-url origin <项目的新仓库地址> git push origin --all git…