js 深拷贝、浅拷贝深度解析

news2024/12/25 9:15:45

赋值操作:

    let obj={
      a:1,
      b:[1,2,3],
      c:{
        m:2
      }
    }
    let newObj=obj
    newObj.a=2
    newObj.b.push(4)
    newObj.c.m=3
    console.log(obj,newObj);

 

将一个对象赋值给一个变量,其实就是将这个对象在栈内存中的引用地址复制给了这个变量,这两个对象指向堆内存中的同一个数据引用,所以,其中一个对象的值发生变化,另一个都会跟着变化。

浅拷贝的实现方法:

1. Object.assign()

2. Array.prototype.concat()

3. Array.prototype.slice()

4. 对象和数组的扩展运算符:{...obj},[...arr]

    let obj={
      a:1,
      b:[1,2,3],
      c:{
        m:2
      },
    }
    const newObj={...obj}
    obj.a=3
    obj.b.push(4)
    console.log(obj,newObj);

 

浅拷贝会在堆内存中开辟新的空间。浅拷贝只复制对象的第一层属性值,如果属性值是基本类型(如数字、字符串、布尔值),则直接复制其值;如果属性值是引用类型(如数组、对象),则复制其引用地址,而不是创建一个新的对象或数组。因此,浅拷贝后的对象和原对象共享相同的引用类型的属性值,修改其中一个对象的这些属性值会影响到另一个对象。

深拷贝实现方法:

1. JSON.parse(JSON.stringify())

    let obj={
      a:1,
      b:[1,2,3],
      c:{
        m:2
      }
    }
    let newObj=JSON.parse(JSON.stringify(obj))
    newObj.a=2
    newObj.b.push(4)
    newObj.c.m=3
    console.log(obj,newObj);// 输出结果 obj的数据没有变化

 

    let obj={
      a:null,
      b:[1,2,3],
      c:undefined,
      fn:()=>{console.log(123);}
    }
    let newObj=JSON.parse(JSON.stringify(obj))
    newObj.b.push(4)
    console.log(obj,newObj);

 JSON.parse(JSON.stringify()) 可以实现深拷贝,缺点是,如果对象或数组中有函数或undefined,就会丢失。

2. 封装深拷贝函数

    let obj={
      a:1,
      b:[1,2,3],
      c:{
        m:2
      },
      k:undefined,
      g:null,
      fn:()=>{console.log(123);}
    }
    function deepCloneFunc(obj) {
      if(typeof obj !=='object') return obj
      const newObj=obj instanceof Array?[]:{}
      for(let key in obj){
        if(obj.hasOwnProperty(key)){
          const value = obj[key]
          newObj[key]=typeof value ==='object'?deepCloneFunc(value):value
        }
      }
      return newObj
    }
    const newObj=deepCloneFunc(obj)
    console.log(newObj);

 

深拷贝其实就是在堆内存中重新开辟了一块内存,创建了一个新的对象,这个对象和被拷贝的对象用于相同的属性和值,他们两个在栈内存中的引用地址也不一样,是相互独立的,因此修改任何一个对象的值,另一个都不会跟着变化。

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

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

相关文章

基于SpringBoot+Vue的产业园区智慧公寓管理系统(带1w+文档)

基于SpringBootVue的产业园区智慧公寓管理系统(带1w文档) 基于SpringBootVue的产业园区智慧公寓管理系统(带1w文档) 当前的网络技术,软件技术等都具备成熟的理论基础,市场上也出现各种技术开发的软件,这些软件都被用于各个领域,包…

Multisim 用LM358 运放模拟线性稳压器 - 运放输出饱和 - 前馈电容

就是拿运放搭一个可调的LDO 稳压器,类似下面这个功能框图里的感觉。本来应该非常简单,没什么好说的,没想到遇到了两个问题。 原理 - 理想运放 我用PNP 三极管Q2 作为输出,运放输出电压升高时,流过PNP 三极管BE 的电流变…

【proteus经典实战】报警器与旋转灯

一、简介 报警器与旋转灯项目是一个典型的嵌入式系统应用,它结合了声音报警和视觉指示功能,广泛应用于安全监控、紧急疏散、交通信号和娱乐设备等多种场景。基于51单片机提供一种集成的声音和视觉报警解决方案,通过声音和灯光的结合&#xff…

12 中断

12 中断 1、内核中断编程2、顶半部和底半部机制2.1 任务的相关概念2.1.1 分类2.1.2 优先级2.1.3 进程调度2.1.4 休眠sleep 2.2 顶半部和底半部实现机制2.2.1 顶半部特点2.2.2 底半部特点2.2.3 底半部实现方法之:tasklet2.2.4 底半部实现机制之工作队列2.2.5 底半部实现机制之软…

微信会员卡怎么做_便捷生活新风尚

在这个快节奏的时代,每一次消费不仅是简单的商品交换,更是一场关于个性、便捷与尊享的深刻体验。随着数字化浪潮的汹涌澎湃,微信会员卡应运而生,它以独特的魅力,重新定义了商家与顾客之间的关系,开启了一场…

网鼎杯-2018-Web-Unfinish

先尝试万能注入: 如果万能注入缺少符号,如果加符又进不去,那我们尝试扫描文件,然后发现有一个register.php的文件,应该是注册页面,我们去打开 知道存储的文件,并利用状态码进行过滤 我们注册的用户名就是aa…

鼠害监测系统:科技守护农业安全

在农业生产中,鼠害一直是威胁作物安全、影响产量的重要因素。然而,随着科技的飞速发展,鼠害监测系统正逐步成为现代农业防治鼠害的重要利器。 鼠害监测系统巧妙融合了现代光电、数控及物联网技术,实现了诱鼠、投喂鼠药、鼠情监测及…

RoBERTa-www-ext 解读及使用方法

背景:模型及名字 hfl/chinese-roberta-wwm-ext 是 Hugging Face 提供的一个中文预训练模型,它是 RoBERTa 的一个变种,特别针对中文进行了优化。这个模型的名称中的“wwm”代表“word-level whole word masking”,意味着在预训练过…

爬虫案例3——爬取彩票双色球数据

简介:个人学习分享,如有错误,欢迎批评指正 任务:从500彩票网中爬取双色球数据 目标网页地址:https://datachart.500.com/ssq/ 一、思路和过程 目标网页具体内容如下: ​​​​​ 我们的任务是将上图中…

数学建模——启发式算法(蚁群算法)

算法原理 蚁群算法来自于蚂蚁寻找食物过程中发现路径的行为。蚂蚁并没有视觉却可以寻找到食物,这得益于蚂蚁分泌的信息素,蚂蚁之间相互独立,彼此之间通过信息素进行交流, 从而实现群体行为。 蚁群算法的基本原理就是蚂蚁觅食的过程…

一套完整的NVR方案与部分NVR录像机GUI源码剖析

一、部分功能展示 1.1 通道管理部分 在NVR系统中,通道管理是核心功能之一。通过通道管理,用户可以对连接的摄像头进行配置和监控。 通道连接使能:用户可以选择开启或关闭特定通道的连接功能,以实现灵活的设备管理。 时间同步&…

Aigtek高压功率放大器指标参数是什么

高压功率放大器是一种用于将电信号放大到较高电压水平的设备。其指标参数对于选择、设计和应用都至关重要。以下是一些常见的高压功率放大器指标参数,详细了解这些参数可以帮助工程师更好地了解设备的性能和适用范围。 电压增益: 电压增益是功率放大器输…

每日一题,力扣leetcode Hot100之189.轮转数组

解题思路,把数组轮换想成栈的出栈后又入栈即可,当然要判断好K的量,因为K有可能会超过数组长度 class Solution:def rotate(self, nums: List[int], k: int) -> None:"""Do not return anything, modify nums in-place ins…

25款极氪007上市,小米SU7就不该买?

文 | AUTO芯球 作者 | 谦行 我是刚刚才知道 买小米SU7的原来是盯着他这两个功能 可爱的小女孩喊小爱同学帮她停个车 妈妈给她说SU7自己能停好,她还叮嘱一句“小爱同学你给我好好停” SU7滴溜溜的就停在车位上,全程不到一分钟 视频属实温馨&#x…

剪辑新手必备:2024年爱剪辑官网免费版下载指南

嘿,朋友们!现在视频在我们生活中就像空气一样,无处不在。无论是记录日常生活的小片段,还是制作一些有趣的视频内容,一款好的剪辑软件都特别关键。今天咱们就来聊聊2024年那些特别受欢迎的剪辑软件,顺便推荐…

Linux---03---网络及防火墙

课程回顾 虚拟安装 文件命令 本章重点 网络相关概念 静态网络配置 一、网络 1.1 什么是网络? 计算机网络是继电信网络、有线电视网络之后出现的世界级大型网络。 计算机网络由若干个结点和连接这些结点的链路组成。 网络中的结点可以是计算机、交换机、路…

虚幻5|给攻击添加特效

一,打开武器蓝图 选择武器网格体,在细节处找到组件开始重叠,点击 写下以下蓝图,这是最终蓝图,后面会分讲要点 二,actor拥有标签,就是被击打的敌人,我们给actor添加标签 到主界面&am…

Linux之sed命令和正则表达式

什么是sed编辑器? sed是一个命令行文本编辑工具,用于对文本进行处理和转换。它可以读取文本文件,对文件的各个行进行修改、删除和替换操作,并将结果输出到标准输出或者文件中。 sed 被广泛用于Unix和类Unix系统中的脚本和命令行操作中&#…

二极管作用

防止电源反接 电路目的是为了,防止电源反接,对电路中的电子元器件造成破坏,造成财产损失或者人身安全。 原理 二极管单向导电性,二极管0.7V正向压降不会对电路造成影响 原理图 这里U7是一个二极管,如果电源反接&…

C++STL初阶(10):list的简易实现(下)

在上一文中我们完成了链表的多数基本接口,本文主要围绕构造函数进行补充 1. 链表的拷贝 在前文中我们没有手动实现拷贝构造,所以使用的就是编译器自动生成的浅拷贝 先使用一下编译器自动生成的浅拷贝: 我们在打印li2之前给li1加入一个数据&…