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.rhkb.cn/news/220643.html

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

相关文章

自动化测试 (五) 读写64位操作系统的注册表

自动化测试经常需要修改注册表 很多系统的设置(比如:IE的设置)都是存在注册表中。 桌面应用程序的设置也是存在注册表中。 所以做自动化测试的时候,经常需要去修改注册表 Windows注册表简介 注册表编辑器在 C:\Windows\regedit…

WebSocket开发

目录 前言 1.介绍 2.原理解析 3.简单的聊天室搭建 4.点到点消息传输 总结 前言 WebSocket 是互联网项目中画龙点睛的应用,可以用于消息推送、站内信、在线聊天等业务。 1.介绍 WebSocket 是一种基于 TCP 的新网络协议,它是一种持久化的协议&…

Java精品项目源码新基于协同过滤算法的旅游推荐系统(编号V69)

Java精品项目源码新基于协同过滤算法的旅游推荐系统(编号V69) 大家好,小辰今天给大家介绍一个基于协同过滤算法的旅游推荐系统

056:vue工具 --- CSS在线格式化

第056个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使…

Netty应用(七) ----MQTT编解码器

目录 0.前言1. MqttEncoder--编码器1.1 构造方法1.2 encodeConnectMessage -- 连接消息1.3 encodeConnAckMessage - 确认连接1.4 encodePublishMessage -- 发布消息1.5 encodeSubscribeMessage - 订阅主题1.6 encodeUnsubscribeMessage - 取消订阅1.7 encodeSubAckMessage - 订…

HarmonyOS应用开发实战—开箱即用的应用首页页面【ArkTS】【鸿蒙专栏-34】

一.HarmonyOS应用开发实战—开箱即用的应用首页页面【ArkTS】【鸿蒙专栏-34】 1.1 项目背景 HarmonyOS(鸿蒙操作系统)是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统,旨在实现在各种设备之间的无缝协同和共享,包括智能手机、平板电脑、智能…

计算机网络(四)

九、网络安全 (一)什么是网络安全? A、网络安全状况 分布式反射攻击逐渐成为拒绝攻击的重要形式 涉及重要行业和政府部门的高危漏洞事件增多。 基础应用和通用软硬件漏洞风险凸显(“心脏出血”,“破壳”等&#x…

出国旅游需要注意些什么

出国旅游是一种令人兴奋、令人期待的经历。然而,在进行这种经历之前,有几件事情是需要注意的。本文将为您介绍出国旅游需要注意的一些重要事项。首先,为了确保您的出国旅行顺利进行,您应该提前办理好您的签证和护照。不同国家对于…

【神器】wakatime代码时间追踪工具

文章目录 wakatime简介支持的IDE安装步骤API文档插件费用写在最后 wakatime简介 wakatime就是一个IDE插件,一个代码时间追踪工具。可自动获取码编码时长和度量指标,以产生很多的coding图形报表。这些指标图形可以为开发者统计coding信息,比如…

头部首发优志愿头部u_sign生成与TLS指纹处理! + 数据可视化技术讲解【Python爬虫】

目录 针对大学名称 大学排名, 综合指数,学校情况等数据进行爬取 找对应得数据包 请求发现数据有加密 发现加密参数 搜索加密参数,好进行分析 分析过程 数据可视化 针对大学名称 大学排名, 综合指数,学校情况等数据进行爬取 首先进行鼠标右键,进行…

Spring Boot+Mybatis设置sql日志打印

在全局配置文件添加以下内容:logging.level.com.demo.mapperdebug,com.demo.mapper:src下的mapper路径,debug:设置日志打印级别为debug,亦可设置为:ERROR、WARN、INFO application.properties …

TikTok获客技巧分享(纯干货)

随着全球短视频的兴起,TikTok已经成为了最受欢迎的社交媒体平台之一,对于企业和个人而言,如何在TikTok上获取更多的客户和粉丝,成为了他们关注的焦点,本文将分享一些TikTok获客技巧,帮助大家在短视频平台上…

初识Redis缓存,一文掌握Redis重要知识文集。

🏆作者简介,普修罗双战士,一直追求不断学习和成长,在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论…

云原生基础入门概念

文章目录 发现宝藏云原生的概念云原生的关键技术为何选择云原生?云原生的实际应用好书推荐 发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。 云原生的概念 当谈及现…

[23] GaussianAvatars: Photorealistic Head Avatars with Rigged 3D Gaussians

[paper | proj] 给定FLAME,基于每个三角面片中心初始化一个3D Gaussian(3DGS);当FLAME mesh被驱动时,3DGS根据它的父亲三角面片,做平移、旋转和缩放变化;3DGS可以视作mesh上的辐射场&#xff1…

智能优化算法应用:基于算术优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于算术优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于算术优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.算术优化算法4.实验参数设定5.算法结果6.…

SD-WAN网络的可扩展性解析

SD-WAN组网以其卓越的可扩展性而脱颖而出,为企业提供了一个灵活适应不断扩张和增长需求的网络解决方案。SD-WAN组网通过轻松实现规模调整、拓扑变更以及多种接入方式的切换,确保网络的高效性和可管理性。对于正处于快速发展时期的企业而言,SD…

在IDEA中使用Git 、远程仓库克隆工程到本地

4.1 在IDEA中配置Git 安装好IntelliJ IDEA后,如果Git安装在默认路径下,那么idea会自动找到git的位置,如果更改了Git的安装位置则需要手动配置下Git的路径。 选择File→Settings打开设置窗口,找到Version Control下的git选项: 选择git的安装目录后可以点击“Test”按钮测…

探讨小鹏汽车CAN通讯协议分析破解过程数据研究技术应用

当前新能源电动汽车设计日益复杂,为提高舒适性、功能性、提升性能和确保更高的安全性,很多汽车的设计中融入了更复杂的功能。包括了雷达、激光雷达、自适应巡航、L2以上自动驾驶系统,高级驾驶辅助系统、盲区监测等等。安装在汽车上的传感器和…

Java中线程状态的描述

多线程-基础方法的认识 截止目前线程的复习 Thread 类 创建Thread类的方法 继承Thread类,重写run方法实现Runnable接口,重写run方法使用匿名内部类继承Thread类,重写run方法使用匿名内部类实现Runnable接口,重写run方法使用Lambda表达式 run方法中的所有的代码是当前线程对…