JS的浅拷贝和深拷贝

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

浅拷贝:

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

代码解释:

const obj = {
            uname:'pink',
            age:18,
            family:{
                baby:'一'
            }
        }
        const o = {...obj};
        o.age = 20;
        console.log(obj.age);//18
        console.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);//18
        console.log(o.age);//20
        console.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的值并没有改变:

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Postman/Apifox使用教程

Postman/Apifox使用教程 1. 界面导航说明2.发送第一个请求3. 工具的基础功能3.1 常见类型的接口请求3.1.1 查询参数的接口请求3.1.2 表单类型的接口请求3.1.3 上传文件的表单请求3.1.4 json类型的接口请求 3.2 接口响应数据解析 附录 1. 界面导航说明 2.发送第一个请求 http:/…

css的filter全属性介绍

原图: 模糊(blur) 单位可为px或rem,值越大,越模糊 filter:blur(3px) filter:blur(0.3rem) 亮度(brightness) 值可为数字或百分数,小于1时,亮度更暗;等于1时,无变化&am…

非递归实现的快速排序

目录 序列文章 前言 学前补充 非递归快速排序 注意事项(重要) 实现步骤 代码实现 时空复杂度 快速排序的特性 栈的相关代码 序列文章 非递归实现的快速排序:http://t.csdnimg.cn/UEcL6 快速排序的挖坑法与双指针法:ht…

如何免费搭建私人电影网站(二)

前一篇的准备工作做好后就进行下面的具体操作 1、免费主机申请步骤 产品——立即开通 开通成功后会出现IP地址和网站地址如下图 点击进去管理 设置FTP密码和MYSQL数据库密码 设置好后,就可以通过FTP文件上传工具,将下载好的网站模版上传到空间了 FTP…

178. 第K短路(A*启发式算法)

178. 第K短路 - AcWing题库 给定一张 N 个点(编号 1,2…N),M 条边的有向图,求从起点 S 到终点 T 的第 K 短路的长度,路径允许重复经过点或边。 注意: 每条最短路中至少要包含一条边。 输入格式 第一行包…

python self用法详解

对于在类体中定义的实例方法,Python 会自动绑定方法的第一个参数(通常建议将该参数命名为 self),第一个参数总是指向调用该方法的对象。根据第一个参数出现位置的不同,第一个参数所绑定的对象略有区别: 在…

vue npm install 报错处理

一。Error: Cant find Python executable "python", you can set the PYTHON env variable 解决办法: 1、安装windows-build-tools npm install --global --production windows-build-tools2.安装node-gyp npm install --global node-gyp

云渲染农场如何付费使用?动画、效果图都一般怎么收费得?

许多刚入门计算机图形学的朋友可能会疑问,为何在渲染过程中需要借助云渲染服务,以及为何这些服务不是免费的。简单来讲,就是因为渲染工作量庞大,本机处理能力有限。设计和动画行业日渐将云渲染视为基本开支,这是因为数…

linux机器下/etc/hosts和/etc/resolv.conf文件解析

文章目录 1. /etc/resolv.conf1.1 概念1.2 配置1.3 用途 2. /etc/hosts2.1 概念2.2 配置2.3 两者优先级对比 1. /etc/resolv.conf 1.1 概念 DNS客户机的配置文件,用于设置DNS服务器的IP地址及DNS域名,还包含了主机的域名搜索顺序。该文件是由域名解析器…

5. Prism系列之区域管理器

Prism系列之区域管理器 文章目录 Prism系列之区域管理器一、区域管理器二、区域创建与视图的注入1. ViewDiscovery2. ViewInjection 三、激活与失效视图1. Activate和Deactivate2. 监控视图激活状态3. Add和Remove 四、自定义区域适配器1. 创建自定义适配器2. 注册映射3. 创建区…

【map】【单调栈 】LeetCode768: 最多能完成排序的块 II

作者推荐 【贪心算法】【中位贪心】.执行操作使频率分数最大 涉及知识点 单调栈 排序 map 区间合并 题目 给你一个整数数组 arr 。 将 arr 分割成若干 块 ,并将这些块分别进行排序。之后再连接起来,使得连接的结果和按升序排序后的原数组相同。 返回…

Java 实现汉字转拼音带音调

代码 import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat; import net.sourceforge.pinyin4j.format.HanyuPinyinToneType; import net.sourceforge.pinyin4j.format.HanyuPinyinVCharType; import net.sourcefo…

Linux学习笔记-Ubuntu下ssh服务器连接异常Connection reset

文章目录 一、问题问题现象1.1 连接重置无法访问的的问题1.2 查看服务器连接状态1.3 使用调试模式查看的信息 二、临时解决方法三、从根源解决问题3.1 问题分析3.2 服务器的ssh日志3.3 修改ssh配置禁止root登录3.4 配置允许所有ip访问3.5 修改认证方法3.6 再找原因 角色&#x…

Java生成带log的二维码

生成二维码案例 1.引入依赖 <!-- zxing生成二维码 --> <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.3.3</version> </dependency><dependency><groupId>co…

无锡市某厂区工人上岗未穿工作服,殒命车间 富维AI守护每位工友

2018年12月23日&#xff0c;凌晨6点半左右&#xff0c;江阴华士某铜业公司轧球车间内&#xff0c;独自上夜班的操作工朱某正在操作行车吊运一筐切好的铜粒&#xff0c;吊运完成后&#xff0c;他开始解除料筐上的吊具。就在这时&#xff0c;意外突然发生&#xff0c;他身上穿着的…

C++学习笔记(十六)

一、多态 1. 多态的基本概念 多态是C面向对象三大特性之一 多态分为两类 1. 静态多态&#xff1a;函数重载 和 运算符重载属于静态多态&#xff0c;复用函数名 2. 动态多态&#xff1a;派生类和虚函数实现运行时多态 静态多态和动态多态区别&#xff1a; 1. 静态多态的函…

STM32单片机项目实例:基于TouchGFX的智能手表设计(5)硬件驱动层程序设计

STM32单片机项目实例&#xff1a;基于TouchGFX的智能手表设计&#xff08;5&#xff09;硬件驱动层程序设计 目录 一、 概述 二、 新建工程与外设配置 三、 TouchGFX配置 四、 增加TouchGFX关键驱动 一、 概述 本文内容主要进行工程新建&#xff0c;硬件外设的配置以及添加…

用webstorm学习Vue的时候提示未解析的变量或类型怎么办?

用webstorm学习Vue的时候&#xff0c;很多同学是不是对以下这种提示看着不舒服 这种提示因为webstorm在解析代码进行提示的时候会把html文件中css选择器进行缓存&#xff0c;如果你在同一个文件夹下面写很多个html&#xff0c;并且多个html中都有同样的<div id"root&qu…

用23种设计模式打造一个cocos creator的游戏框架----(二十一)组合模式

1、模式标准 模式名称&#xff1a;组合模式 模式分类&#xff1a;结构型 模式意图&#xff1a;将对象组合成树型结构以表示“部分-整体”的层次结构。Composite 使得用户对单个对象和组合对象的使用具有一致性。 结构图&#xff1a; 适用于&#xff1a; 1、想表示对象的部分…

RK3399平台开发系列讲解(内核入门篇)网络协议的分层

🚀返回专栏总目录 文章目录 一、应用层二、传输层三、网络层四、数据链路层(Data Link Layer)五、物理层沉淀、分享、成长,让自己和他人都能有所收获!😄 📢对于多数的应用和用户而言,使用互联网的一个基本要求就是数据可以无损地到达。用户通过应用进行网络通信࿰