JS中浅拷贝和深拷贝

  本篇文章咱们一起来学习下JS中的浅拷贝和深拷贝,了解它们在内存上的区别,并掌握浅拷贝和深拷贝的常用实现方法。

引用赋值

  在学习拷贝之前,咱们先来看一个常见的情景,如下图:

  大家觉得这是深拷贝还是浅拷贝,或者是其他的?

  答案是这种方式是引用赋值,它既不是深拷贝,也不是浅拷贝。在内存上的体现是person1和person2的内存指针都指向同一个堆内存对象,验证方式如下图:

  从输出结果可以看到修改person1和surname属性,person2的surname属性也发生了更改。

浅拷贝

  浅拷贝比较常见的实现方法是通过展开运算符(展开运算符被允许使用在对象字面量声明的时候),如下图:

  在内存上的体现是person1和person2分别指向不同的堆内存对象,验证方式如下图:

  从输出结果可以看到person2的surname属性并没有因为person1的surname属性发生改变而改变。

深拷贝

  通常用于复杂类型的拷贝,同时咱们也可以用来反向证明一下展开运算符是浅拷贝,代码如下图:

  从输出结果可以看到,1号小人的朋友从钱姓朋友变成了孙姓朋友,而2号小人的朋友姓氏也随之改变,这就说明person1和person2的friend指向的是同一个堆内存对象,而深拷贝需要将嵌套的每一层的对象都拷贝成全新的堆内存对象,常用的实现方法如下图:

  通过JSON.stringify方法将person1对象转为JSON,再通过JSON.parse方法将JSON字符串转化为全新的JS对象,从而实现深拷贝,验证方式如下图:

  从输出结果可以看到,1号小人的朋友从钱姓朋友变成了孙姓朋友,2号小人的朋友仍然是钱姓朋友。

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

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

相关文章

【计算机网络】—— 详解码元,传输速率的计算|网络奇缘系列|计算机网络

🌈个人主页: Aileen_0v0🔥系列专栏: 一见倾心,再见倾城 --- 计算机网络~💫个人格言:"没有罗马,那就自己创造罗马~" 目录 码元 速率和波特 思考1 思考2 思考3 带宽(Bandwidth) 📝总结 码元…

Android属性动画

关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、商业变现、人工智能等,希望大家多多支持。 目录 一、导读二、概览三、常用API3.1 ValueAnimator3.2 Obje…

基于AT89C52单片机的计算器设计与仿真

点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/88637995?spm1001.2014.3001.5503 源码获取 B 源码仿真图课程设计51 摘 要 计算器一般是指“电子计算器”,能进行数学运算的手持机器,拥有集成电路芯…

广东高院严惩“套路贷”犯罪,保护校园安全

近日,广东高院发布了一批依法严惩“套路贷”犯罪的典型案例,其中一起涉及在校学生的“套路贷”案件引起了广泛关注。 这起案件中,张某等人针对在校大学生开展无抵押高息短期借款“套路贷”业务,通过频繁威胁恐吓、借新还旧、转单…

Linux:进程地址空间

目录 1.程序地址空间 2.进程地址空间 1.程序地址空间 我们在讲C/C语言的时候,32位平台下,我们见过这样的空间布局图 我们来验证一下这张图的正确性: int un_gval;int init_gval100;int main(int argc, char* argv[],char* env[]){//代码…

springMVC-模型数据的处理

一、数据放入到request域当中 1、把获取的数据放入request域中&#xff0c; 方便在跳转页面去显示 <a>添加主人信息</a> <form action"vote/vote04" method"post" >主人id&#xff1a;<input type"text" name"id&q…

Vue学习笔记-Vue3中的customRef

作用 创建一个自定义的ref&#xff0c;并对其依赖项的更新和触发进行显式控制 案例 描述&#xff1a;向输入框中输入内容&#xff0c;在下方延迟1秒展示输入内容 代码&#xff1a; <template><input type"text" v-model"keyword"><h3&…

设计模式——组合模式(结构型)

引言 组合模式是一种结构型设计模式&#xff0c; 你可以使用它将对象组合成树状结构&#xff0c; 并且能像使用独立对象一样使用它们。 问题 如果应用的核心模型能用树状结构表示&#xff0c; 在应用中使用组合模式才有价值。 例如&#xff0c; 你有两类对象&#xff1a; ​…

用23种设计模式打造一个cocos creator的游戏框架----(十五)策略模式

1、模式标准 模式名称&#xff1a;策略模式 模式分类&#xff1a;行为型 模式意图&#xff1a;定义一系列的算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可以相互替换。此模式使得算法可以独立于使用它们的客户而变化 结构图&#xff1a; 适用于&#xff1…

贝锐蒲公英解决方案:企业海外分部高效、稳定访问国内办公系统

某电气技术有限公司是一家专注数字电源研发、制造和销售的企业。公司致力于为大数据和新能源行业提供智慧能源解决方案, 数字电源产品在数据与算力中心、网络基础设施、电池储能换电、家庭能源系统中均有广泛应用。目前在国内以及东南亚、欧洲、美国等地设有分公司/办事处&…

STM32F407-14.3.18-01连接霍尔传感器

连接霍尔传感器 可通过用于生成电机驱动 PWM 信号的高级控制定时器&#xff08;TIM1 或 TIM8&#xff09;以及图 114 中称为 “接口定时器”的另一个定时器 TIMx&#xff08;TIM2、TIM3、TIM4 或 TIM5&#xff09;&#xff0c;实现与霍尔传感器的连接。3 个定时器输入引脚&…

Android动画(四)——属性动画ValueAnimator的妙用

目录 介绍 效果图 代码实现 xml文件 介绍 ValueAnimator是ObjectAnimator的父类&#xff0c;它继承自Animator。ValueAnimaotor同样提供了ofInt、ofFloat、ofObject等静态方法&#xff0c;传入的参数是动画过程的开始值、中间值、结束值来构造动画对象。可以将ValueAnimator看…