JavaScript深拷贝与浅拷贝的全面解析

🧑‍🎓 个人主页:《爱蹦跶的大A阿》

🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》

​ 

目录

✨ 前言

✨ 正文

浅拷贝

对象的浅拷贝

数组的浅拷贝

浅拷贝的问题

 深拷贝

什么是深拷贝?

如何实现深拷贝?

方法一:使用JSON对象

方法二:递归拷贝

注意事项

✨ 结语


✨ 前言

       浅拷贝和深拷贝的区别在于当对象中的属性是引用类型时,拷贝是引用的拷贝,还是引用所指向的对象的拷贝。

        浅拷贝只复制对象和其属性的引用,而不复制属性指向的对象本身。因此源对象和拷贝对象引用同一个对象。改变其中一个会影响另一个。

        深拷贝会递归复制整个对象及其属性,拷贝后的对象与原对象不共享内存,修改拷贝对象不会影响原对象。

        拷贝是编程中常见的需求,JavaScript中有深拷贝和浅拷贝之分,理解二者差异很重要。本文将全面解析拷贝的实现方式。

✨ 正文

浅拷贝

对象的浅拷贝

        浅拷贝会创建对象或数组的一份浅复制,只复制第一层的属性值,更深层次的对象仍保持引用关系。

对象的浅拷贝可以使用Object.assign():

let obj1 = {a: 1,b: {c: 2  }
};let obj2 = Object.assign({}, obj1);

        obj2只会拷贝obj1第一层的a属性值,而 deeper object b仍然指向同一个引用。

展开语法(...)也可以实现浅拷贝:

let obj2 = {...obj1};

数组的浅拷贝

        数组的slice()方法可以浅拷贝数组:

let arr1 = [1, 2, [3, 4]];
let arr2 = arr1.slice();

        arr2也只会拷贝arr1的一层元素,更深层的数组仍指向同一个。

浅拷贝的问题

        由于指向同一对象,修改会互相影响:

obj2.b.c = 20; // obj1.b.c也变为20
arr2[2].push(5); // arr1也会增加元素5

 深拷贝

什么是深拷贝?


        深拷贝是在JavaScript中复制一个对象或数组,使其成为一个完全独立的新副本。在进行深拷贝时,不仅需要复制对象本身,还需要递归地复制对象中的所有嵌套对象和数组。这确保了原始对象和拷贝对象之间的修改互不影响。

如何实现深拷贝?

方法一:使用JSON对象
let newObj = JSON.parse(JSON.stringify(oldObj));

这种方法简单易用,但是有一些局限性。例如,它不能复制函数和正则表达式对象

方法二:递归拷贝
function deepClone(obj) {let clone = Array.isArray(obj) ? [] : {};if (obj && typeof obj === "object") {for (let key in obj) {if (obj.hasOwnProperty(key)) {if (obj[key] && typeof obj[key] === "object") {clone[key] = deepClone(obj[key]);} else {clone[key] = obj[key];}}}return clone;} else {return obj;}
}

        这种方法可以复制大多数类型的对象,但是对于特殊对象,如Date对象、正则对象等,还需要特殊处理。

注意事项


        深拷贝复制所有字段,并复制字段所指向的动态分配内存。深拷贝发生在对象及其引用的对象被复制时。默认情况下基本数据类型(number,string,null,undefined,boolean)都是深拷贝

✨ 结语

        在编程的世界里,理解和掌握浅拷贝、深拷贝的概念和实现方式是非常重要的。希望通过这篇博客,你对JavaScript的浅拷贝、深拷贝有了更深入的理解。记住,不断学习和实践是提升编程技能的关键。祝你在编程的道路上越走越远,加油!

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

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

相关文章

如何激活数据要素价值

文章目录 前言一、数据作为生产要素的背景二、数据作为新型生产要素,是价值创造的重要源泉(一)生产要素是经济活动中的基本要素(二)激活数据要素价值,要从理论上认识数据要素的基本特征(三&…

CMU15-445-Spring-2023-Project #2 - B+Tree

前置知识:参考上一篇博文 CMU15-445-Spring-2023-Project #2 - 前置知识(lec07-010) CHECKPOINT #1 Task #1 - BTree Pages 实现三个page class来存储B树的数据。 BTree Page internal page和leaf page继承的基类,只包含两个…

C语言辨析——深入理解字符常量与表达式

1. 问题 今天看到一个题目,截图如下。 从答题情况来看,本题的答案是B,那么就意味着A、C、D是错的。但我认为这4个选项都是对的。当然,如果要从4个选项中挑选一个的话,那还是选择B妥当一些。 2. 分析 字符常量的定义…

【漏洞复现】优卡特脸爱云一脸通智慧管理平台权限绕过漏洞CVE-2023-6099(1day)

漏洞描述 脸爱云一脸通智慧管理平台1.0.55.0.0.1及其以下版本SystemMng.ashx接口处存在权限绕过漏洞,通过输入00操纵参数operatorRole,导致特权管理不当,未经身份认证的攻击者可以通过此漏洞创建超级管理员账户。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当…

CAN总线报文格式———扩展数据帧

扩展数据帧由帧起始、仲裁段、控制段、数据段、CRC段、ACK段、帧结束等组成。 一、总线空闲(Bus Idle) CAN总线空闲时,总线上会输出持续的高电平“1”。当总线空闲时任何连接的单元都可以开始发送新的报文。 二、帧起始(Start o…

鱼哥赠书活动第⑤期:《ATTCK视角下的红蓝对抗实战指南》《智能汽车网络安全权威指南》上下册 《构建新型网络形态下的网络空间安全体系》《Kali Linux高级渗透测试》

鱼哥赠书活动第⑤期: 《ATT&CK视角下的红蓝对抗实战指南》1.1介绍: 《智能汽车网络安全权威指南》上册1.1介绍: 《智能汽车网络安全权威指南》下册1.1介绍: 《构建新型网络形态下的网络空间安全体系》1.1介绍: 《K…

遭受慢速连接攻击怎么办?怎么预防

慢速连接攻击是一种常见的网络攻击方式,其原理是利用HTTP协议的特性,在建立了与Http服务器的连接后,尽量长时间保持该连接,不释放,达到对Http服务器的攻击。 慢速连接攻击的危害包括以下几个方面: 1.资源…

推荐一款.NET开发的物联网开源项目

物联网(IoT)是一个正在快速发展的技术领域,它涉及到各种设备、物体和系统的互联。所以各种物联网平台和物联网网关项目层出不穷,在物联网(IoT)领域,.NET平台扮演着重要的角色。作为一款广泛使用…

管理软件供应链中网络安全工具蔓延的三种方法

软件开发组织不断发展,团队成长,项目数量增加。技术堆栈发生变化,技术和管理决策变得更加分散。 在这一演变过程中,该组织的 AppSec 工具组合也在不断增长。在动态组织中,这可能会导致“工具蔓延”。庞大的 AppSec 工…

Colab 谷歌免费的云端Python编程环境初体验

最新在学习AIGC的过程中,发现很多教程,demo使用到了Colab这个谷歌工具。 Colab 是什么? Google Colab是一个强大且免费的云端Python编程环境,为学生、研究人员和开发者提供了一个便捷的平台来开展数据科学、机器学习和深度学习项…

《最新出炉》系列入门篇-Python+Playwright自动化测试-9-页面(page)

1.简介 通过前边的讲解和学习,细心认真地小伙伴或者童鞋们可能发现在Playwright中,没有Element这个概念,只有Page的概念,Page不仅仅指的是某个页面,例如页面间的跳转等,还包含了所有元素、事件的概念&#…

redis夯实之路-主从复制详解

Redis中可以通过执行slaveof命令或者设置slaveof选项,让一个服务器区复制另一个服务器,被复制的为主服务器,复制的为从服务器。 复制 Redis中可以通过执行slaveof命令或者设置slaveof选项,让一个服务器区复制另一个服务器&#…

LLVM系列(1): 在微软Visual Studio下编译LLVM

参考链接: Getting Started with the LLVM System using Microsoft Visual Studio — LLVM 18.0.0git documentation 1.安装visualstudio,版本需要大于vs2019 本机环境已安装visual studio2022,省略 2安装Makefile,版本需要大…

C++力扣题目617--合并二叉树

给你两棵二叉树: root1 和 root2 。 想象一下,当你将其中一棵覆盖到另一棵之上时,两棵树上的一些节点将会重叠(而另一些不会)。你需要将这两棵树合并成一棵新二叉树。合并的规则是:如果两个节点重叠&#…

YOLOv5改进 | 二次创新篇 | 结合iRMB和EMA形成全新的iEMA机制(全网独家创新)

一、本文介绍 本文给大家带来的改进机制是二次创新的机制,二次创新是我们发表论文中关键的一环,为什么这么说,从去年的三月份开始对于图像领域的论文发表其实是变难的了,在那之前大家可能搭搭积木的情况下就可以简单的发表一篇论文,但是从去年开始单纯的搭积木其实发表论…

Spring Boot - JaCoCo Code Coverage

文章目录 概述如何集成pom添加插件Code Demo排除不相关的类CI/CD中使用完整POM 概述 JaCoCo(Java Code Coverage)是一个开源的Java代码覆盖率工具,它主要用于评估Java程序的测试完整性。通过跟踪测试过程中执行的代码,JaCoCo能够…

【期末不挂科-C++考前速过系列P6】大二C++实验作业-模板(4道代码题)【解析,注释】

前言 大家好吖,欢迎来到 YY 滴C考前速过系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! YY的《C》专栏YY的《C11》专栏YY的《…

大学期末考前复习卷(上)

第一题: 泰勒展开式求sin(x) 【问题描述】 已知sin(x)的泰勒展开式为: sin(x) x/1! - x^3/3! x^5/5! - x^7/7! …… 当某一项的绝对值小于ξ时,停止计算。 输入x及ξ的值,输出sin(x)的值,小数点后保留5位小数。…

第8章-第6节-Java中字符流的缓冲流

1、在说正题之前,先说一个小细节,不管是字节流还是字符流都要注意这个细节,具体看这篇博文:关于Java的IO流里面的方法read()的小细节 2、字符流的缓冲流: 1)、BufferedWriter 方法名说明void newLine()写…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《与新能源互补和独立参加多级市场的抽蓄电站容量分配策略》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 这个标题涉及到抽蓄电站在能源系统中的角色,特别是在多级市场中的参与,并强调了新能源的互补性以及抽蓄电站的独立性。下面我将…