JS中浅拷贝和深拷贝

news2024/11/28 20:43:19

  本篇文章咱们一起来学习下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.coloradmin.cn/o/1318483.html

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

相关文章

ensp创建配置环境,实现全网互访

文章目录 创建配置环境,实现全网互访配置步骤接入层交换机(sw4、sw5)划分vlan汇聚层交换机(sw2、sw3)配置ip地址作为vlan网关、与sw1 ip地址直连核心层交换机(sw1)配置ip地址与汇聚层交换机&…

计算机网络:数据链路层(VLAN)

今天又学到一个知识,加油! 目录 一、传统局域网的局限(促进VLAN的诞生) 二、VLAN简介 三、VLAN的实现 总结 一、传统局域网的局限(促进VLAN的诞生) 缺乏流量隔离:即使把组流量局域化道一个单一交换机中…

Java小案例-RocketMQ的11种消息类型,你知道几种?(请求应答消息)

前言 Rocket的请求应答消息是指在使用Rocket(这里可能是RocketMQ或者Rocket框架)进行通信时,客户端发送一个请求到服务端,然后服务端处理该请求并返回一个响应的过程中的数据交换。 在RocketMQ中: 请求应答消息通常…

MySQL性能测试(完整版)

MySQL性能测试之SysBench 一、SysBench安装 1、mac安装命令:(其他系统安装对应的命令即可,不影响后面的使用) brew install sysbench2、查看是否安装成功; sysbench --version附: (1&#x…

The Grid – Responsive WordPress Grid响应式网格插件

点击阅读The Grid – Responsive WordPress Grid响应式网格插件原文 The Grid – Responsive WordPress Grid响应式网格插件是一个高级 wordpress 网格插件,它允许您在完全可定制且响应迅速的网格系统中展示任何自定义帖子类型。 Grid WordPress 非常适合展示您的博…

runCatching异常捕获onSuccess/onFailure返回函数,Kotlin

runCatching异常捕获onSuccess/onFailure返回函数,Kotlin fun test(a: Int, b: Int) {runCatching {a / b}.onSuccess {println("onSuccess: $it")return ok(it)}.onFailure {println("onFailure: $it")return fail(it)} }fun ok(o: Any) {prin…

QT第一步

文章目录 软件下载软件安装QT的程序组新建项目 软件下载 qt下载网址:https://download.qt.io/archive/qt/   关于版本:     我选择的版本是5.14.2,这个版本是最后的二进制安装包的版本,在往后的版本就需要在线安装了。并且5…

常用网安渗透工具及命令(扫目录、解密爆破、漏洞信息搜索)

目录 dirsearch: dirmap: 输入目标 文件读取 ciphey(很强的一个自动解密工具): john(破解密码): whatweb指纹识别: searchsploit: 例1: 例2: 例3&…

QT5 CMake进行开发

配置环境 因为是使用CMake进行开发,所以推荐使用的QT版本是 5.14.2。因为楼主有 vs2015的环境,所以在安装QT时选择的是 msvc 2015 64bit msvc 2017 32bit 勾选了所有需要的模块。kit配置如下 图中画框的地方是比较关键的地方,1. 指定编译器…

3. cgal 示例 GIS (Geographic Information System)

GIS (Geographic Information System) 地理信息系统 原文地址: https://doc.cgal.org/latest/Manual/tuto_gis.html GIS 应用中使用的许多传感器(例如激光雷达)都会生成密集的点云。此类应用程序通常利用更先进的数据结构:例如,不…

【STM32】STM32学习笔记-对射式红外传感器计次 旋转编码器计次(12)

00. 目录 文章目录 00. 目录01. NVIC相关函数1.1 NVIC_PriorityGroupConfig函数1.2 NVIC_PriorityGroup类型1.3 NVIC_Init函数1.4 NVIC_InitTypeDef类型 02. 外部中断相关API2.1 GPIO_EXTILineConfig2.2 EXTI_Init2.3 EXTI_GetITStatus2.4 EXTI_ClearITPendingBit2.5 中断回调函…

一篇文章了解Flutter Json系列化和反序列化

目录 一. 使用dart:convert实现JSON格式编解码1. 生成数据模型类2. 将JSON数据转化成数据模型类3. 数据模型类转化成JSON字符串 二、借助json_serializable实现Json编解码1.添加json_annotation、build_runner、json_serializable依赖2. 创建一个数据模型类3. 使用命令行生成JS…

【XR806开发板试用】+ 通过网络控制led并上报按键状态

通过网络控制led并上报按键状态 本次做一个手机通过mqtt服务器控制板子上的LED亮灭,板子也可以将按钮状态变化通过mqtt服务器上报给手机的功能 硬件上,从原理图看,LED接到了PA21,高电平点亮。 按键则时接到了PA11,并…

kali虚拟机无网络

1.查看虚拟机的网卡模式 在虚拟机设置里,一般选择桥接模式,也可以选择NAT模式。 2、你的IP地址是否写死了(设置为静态IP) vim编辑模式下的命令: 按a或i进入编辑模式,然后按esc键退出编辑模式,s…

多条件三元表达式如何写?

在某些业务需求情况下,如何书写多条件三元表达式?(例如,父组件传值给子组件,子组件根据不同的值去响应不同的颜色变化该如何实现?) 父组件: 父组件传testData的值给子组件&#xff…

diffuser库之 Load pipelines, models, and schedulers 的阅读记录

加载不同pipeline safe checker pipeline转换 加载模型配置 远程库与本地库使用区别 本地库必须引入variant参数用于选择加载哪一种模型 保存模型 修改pipeline的scheduler pipeline class以及各个子模块的定义

保护性地编写readObject方法

在Java中,通过谨慎保护性地编写 readObject 方法,我们可以在对象反序列化的过程中加入额外的安全检查和验证,以确保反序列化后的对象的状态是合法和安全的。以下是一个简单的例子,演示如何保护性地编写 readObject 方法&#xff1…

表格el-tooltip和show-overflow-tooltip衝突

表格el-tooltip和show-overflow-tooltip衝突&#xff1a; 二、产品需要实现的效果如下 三、解决文案 1、HTML代码 <el-table:data"tableData"header-row-class-name"custom-table-header"header-cell-class-name"custom-table-header-cell"…

【高效写作技巧】文章质量分有什么用?如何提高质量分

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《写作技巧》 《C嘎嘎干货基地》 ⛺️生活的理想&#xff0c;就是为了理想的生活! &#x1f4cb; 前言 &#x1f308;hello&#xff01; 各位铁铁们大家好啊&#xff0c;这段时间接触了一些刚开始写作的新人…

Command line is too long. Shorten command line for Application or also

一、问题描述 Error running ‘Application’: Command line is too long. Shorten command line for Application or also for Spring Boot default configuration? 二、原因分析 springboot项目启动命令过长&#xff01; 三、解决方案 第1步:点击项目启动配置项 第2步…