JS的浅拷贝和深拷贝

首先理解什么是浅拷贝和深拷贝:

浅拷贝:

  • 浅拷贝只会复制对象的第一层属性,而不会递归地复制嵌套的对象。
  • 浅拷贝仅复制对象的引用,新对象和原始对象仍然共享相同的引用,因此对新对象的修改可能会影响到原始对象。
  • 浅拷贝方法包括Object.assign()、扩展运算符...等。

代码解释:

const obj = {uname:'pink',age:18,family:{baby:'一'}}const o = {...obj};o.age = 20;console.log(obj.age);//18console.log(o.age);//20

这是浅拷贝  只会复制对象的第一次层属性   因此会看到两个对象的age值不一样

再看对象嵌套多层对象时的输出:

const obj = {uname:'pink',age:18,family:{baby:'一'}}const o = {};Object.assign(o,obj);o.age = 20;o.family.baby = '二';console.log(obj.age);//18console.log(o.age);//20console.log(obj.family.baby);//二console.log(o.family.baby);//二

这里我们可以看到  浅拷贝在我们只有一层属性的时候 修改不会对源对象造成影响,但是当源对象中有多层对象的时候  对于o.family.baby的赋值操作,由于oobj对象都引用了相同的family对象,所以修改o.family.baby实际上也会影响到obj.family.baby。这是因为浅拷贝只复制对象的引用,所以当引用指向的对象发生改变时,所有引用该对象的变量都会受到影响。当执行Object.assign(o, obj)时,o对象获得了obj对象的属性和值。所以,o.age的赋值操作并不会影响到obj.age,因为这只是修改了o对象的属性值,并没有改变原始的obj对象。

常用方法:

  1. 拷贝对象:Object.assgin()/展开运算符{...obj}拷贝对象

  2. 拷贝数组:Array.prototype.concat()或者[...arr]

直接赋值获得前拷贝有什么区别?

  • 直接赋值的方法,只要是对象,都会影响,因为是直接拷贝对象栈的地址

  • 浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还是回相互影响

浅拷贝怎么理解?

  • 拷贝对象之后,里面的属性值是简单数据类型直接拷贝值

  • 如果属性值是引用数据类型则拷贝的是地址

深拷贝:

深拷贝:拷贝的是对象,不是地址

常用的方法:

  1. 通过递归实现深拷贝

  2. lodash/cloneDeep

    语法:_.cloneDeep(要被克隆的对象);
    const o = _.cloneDeep(obj);

  3. 通过JSON.stringify()实现

    常用使用JSON方法:
    1. const obj = {uanme:'pink',age:18,hobby:['乒乓球','足球'],family:{baby:'小pink'}}//把对象转换成JSON字符串// console.log(JSON.stringify(obj));/*{"uanme":"pink","age":18,"hobby":["乒乓球","足球"],"family":{"baby":"小pink"}}*/const o = JSON.parse(JSON.stringify(obj));console.log(o);o.family.baby = '123';console.log(o);console.log(obj);
      这里的const o = JSON.parse(JSON.stringify(obj));console.log(o);输出的值为:
      1. 这里的baby的值改变下因为下面的 o.family.baby = '123'; 对它进行了改变
      2. 当我们输出那个值的时候会发现和上面的一模一样:
      3. 而当我们输出obj的值的时候会发现它的baby的值并没有改变:

这就是深拷贝 当拷贝的对象发生变化时  源对象不会发生变化

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

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

相关文章

Java小案例-SpringBoot火车票订票购票票务系统

目录 前言 详细资料 源码获取 前言 SpringBoot火车票订票购票票务系统 前端使用技术:HTML5,CSS3、JavaScript、VUE等 后端使用技术:Spring boot(SSM)等 数据库:Mysql数据库 数据库管理工具:phpstud…

tp8 模型save保存方法 method not exist:think\db\Query->record

1.$schema 有一个字段存在,但是实际表中是缺少这个字段的 2.必填值,没有值

什么是关键词排名蚂蚁SEO

关键词排名是指通过搜索引擎优化(SEO)技术,将特定的关键词与网站相关联,从而提高网站在搜索引擎中的排名。关键词排名对于网站的流量和用户转化率具有至关重要的影响,因此它是SEO工作中最核心的部分之一。 如何联系蚂…

二叉树的最大深度(LeetCode 104)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路方法一:深度优先搜索GolangC 方法二:广度优先搜索GolangC 参考文献 1.问题描述 给定一个二叉树 root ,返回其最大深度。 叉树的「最大深度」是指从根节点到最远叶子节点的最长路径上的节…

【SpringMVC】SpringMVC简介、过程分析、bean的加载和控制

文章目录 1. SpringMVC简介2. SpringMVC入门案例文件结构第一步:坐标导入第二步:创建SpringMVC容器的控制器类第三步:初始化SpringMVC环境,设定Spring加载对应的bean第四步:初始化Servlet容器,加载SpringMV…

Leetcode sql50基础题最后的4题啦

算是结束了这个阶段了,之后的怎么学习mysql的方向还没确定,但是不能断掉,而且路是边走边想出来的。我无语了写完了我点进去看详情都不让,还得重新开启计划,那我之前的题解不都没有了!! 1.第二高…

软件测试的魅力何在?为什么很多人选择测试一行而不做开发?

术有专攻,开发和测试都有自己的技术栈领域,谁也代替不了谁。 接下来我就首先说说本人为什么不做开发,而是选择了测试;其次再谈谈测试的魅力。 问题1:为什么选择测试一行而不做开发? 个人工作12年&#xf…

《一书读懂物联网》前言

我们对知识的认知是有规律可循的,大都是从问题开始,对问题的界定、归纳等都是为解决知识增长或进化而服务的,正如波普尔知识进化图(见图 i-1)所示的那样。 科学始于问题,发现问题是科学知识增长的起点&…

【C++】POCO学习总结(十九):哈希、URL、UUID、配置文件、日志配置、动态库加载

【C】郭老二博文之:C目录 1、哈希 1.1 说明 std::map和std::set 的性能是:O(log n) POCO哈希的性能比STL容器更好,大约快两; POCO中对应std::map的是:Poco::HashMap; POCO中对应std::set的是 Poco::Hash…

k8s-ingress 8

ExternalName类型 当集群外的资源往集群内迁移时,地址并不稳定,访问域名或者访问方式等会产生变化; 使用svc的方式来做可以保证不会改变:内部直接访问svc;外部会在dns上加上解析,以确保访问到外部地址。 …

AUTOSAR StbM模块的配置以及代码实现

AUTOSAR StbM模块的配置以及代码实现 1、AUTOSAR配置 2、StbM_Init 初始化各个变量。 3、StbM_MainFunction StbM_Rb_IsSyncTimeBase 同步的TimeBase的id范围是0-15 StbM_Rb_IsOffsetTimeBase offset的TimeBase的id范围是16-31 StbM_Rb_IsPureLocalTimeBase pure的Time…

接口自动化测试框架【AIM】

最近在做公司项目的自动化接口测试,在现有几个小框架的基础上,反复研究和实践,搭建了新的测试框架。利用业余时间,把框架总结了下来。 AIM框架介绍 AIM,是Automatic Interface Monitoring的简称,即自动化…

xv6 文件系统(下)

〇、前言 计算机崩溃后如何恢复,是一个很重要的话题。对于内存中的数据无关痛痒,开机后重新载入就能解决问题;但是对于持久化存储设备,当你尝试修改一个文件,突然断电当你重新打开文件后,这个文件的状态是…

基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十五:基础数据模块相关功能实现

一、本章内容 本章使用已实现的公共组件实现系统管理中的基础数据中的验证码管理、消息管理等功能。 1. 详细课程地址: 待发布 2. 源码下载地址: 待发布 二、界面预览 三、开发视频 3.1 B站视频地址: 基于VUE3+Layui从头搭建通用后台管理系统合集-验证码功能实现 3.2 西瓜…

社科院与新加坡新跃社科联合培养博士—我想我的人生变得精彩

既然人生的幕布已拉开,就一定要积极的演出,既然脚步已经跨出,风吹坎坷也不能退步,既然我已经把希望播在这里,就一定要坚持到胜利的谢幕,人生没有什么是为了别人做的,工作不是为了老板&#xff0…

79-C语言-小球降落和反弹问题

简介:一个球从100m高度处落下,每次落地后反弹回原高度一半,再落下,再反弹。问:它在第十次落地,共运动了多少米,第十次反弹又多高呢? 看代码注释即可 代码如下: #inclu…

Web前端-HTML(常用标签)

文章目录 1. HTML常用标签1.1 排版标签1)标题标签h (熟记)2)段落标签p ( 熟记)3)水平线标签hr(认识)4)换行标签br (熟记)5)div 和 span标签(重点)6)排版标签总结 1.2 标签属性1.3 图像标签img (重点)1.4 链…

MySQL进阶|MySQL中的事务(一)

文章目录 数据库事务MySQL中的存储引擎InnoDB存储引擎架构什么是事务事务的状态总结 数据库事务 MySQL 事务主要用于处理操作量大,复杂度高的数据。比方我想要删除一个用户(销户)以及这个用户的个人信息、订单信息以及其他信息,这…

2024年软件测试入坑指南,新人必看系列

本科非计算机专业,在深圳做了四年软件测试工作,从之前的一脸懵的点点点,到现在会点自动化测试,说一点点非计算机专业人员从事软件测试的心得体会,仅供参考交流。 如果你是非计算机专业,毕业不久&#xff0…

<JavaEE> 文件IO -- File类和文件操作

目录 一、文件的概念 二、文件系统 三、文件类型 四、使用 File 类进行文件操作 4.1 File 类中的 pathSeparator 属性 4.2 File 类构造方法 4.3 File 类常用方法 一、文件的概念 什么是文件? 广义上的“文件”是指抽象化的操作系统中的硬件设备和软件资源&a…