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,一经查实,立即删除!

相关文章

三子棋程序的讲解(4)

前期的准备工作基本上已经差不多了,还差一个如何判断胜负,我们的三子棋就大功告成了。相信大家都玩过三子棋,胜利的方式实际上非常的简单,只需要任意一行(或者任意一列,或者任意对角线)&#xf…

普通的GET和POST请求

一般使用步骤 使用HttpClient发送请求、接收响应,一般需要以下步骤。 HttpGet请求响应的一般步骤: 1). 创建HttpClient对象,可以使用HttpClients.createDefault(); 2). 如果是无参数的GET请求,则直接使用构造方法HttpGet(String u…

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

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

Leetcode 162. 寻找峰值(Java + 二分)

题目 162. 寻找峰值峰值元素是指其值严格大于左右相邻值的元素。给你一个整数数组 nums,找到峰值元素并返回其索引。数组可能包含多个峰值,在这种情况下,返回 任何一个峰值 所在位置即可。你可以假设 nums[-1] nums[n] -∞ 。你必须实现时…

Mybatis配置-类型处理器(typeHandlers)

每当MyBatis设置PreparedStatement的参数或从ResultSet中检索值时,都会使用TypeHandler以适合Java类型的方式来检索值。下表描述了默认的TypeHandlers。 自MyBatis 3.4.5版本起,默认支持JSR-310(日期和时间API)。 Type HandlerJ…

JavaSE学习笔记 Day17

JavaSE学习笔记 Day17 个人整理非商业用途,欢迎探讨与指正!! 上一篇 文章目录 JavaSE学习笔记 Day17十五、异常15.1异常的概念15.2异常处理的重要性15.3Throwable类15.4Exception类15.4.1运行期异常15.4.2编译期异常 15.5异常处理机制15.5.1…

Redis整合Lua脚本

文章目录 一、Lua介绍1.1 Lua特点 二、在Redis里调用lua脚本2.1 redis-cli 命令执行脚本2.2 eval命令执行脚本2.3 return返回脚本运行结果2.4 Redis和lua相关的命令2.5 观察lua脚本阻塞Redis 三、进阶3.1 参数传递KEYS和ARGV参数redis-cli --eval 和eval命令 3.2 流程控制分支语…

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

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

在 C++ 中局部变量和全局变量

在C中,局部变量和全局变量的地址值有以下区别: 存储位置: 局部变量:局部变量存储在栈(stack)上。每当函数被调用时,局部变量的存储空间会被分配,并在函数执行完毕后自动释放。全局变…

什么是关键词排名蚂蚁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…

AI电子秤---顶尖电子秤对接+AI服务

上文我们说道,要实现整个AI识别过程,我们需要电子秤+AI服务,本文将以顶尖OS2电子秤+某AI服务为例完成整个过程 1、电子秤通信 通常电子秤是以串口形式进行通信,这里需要注意的是,某些设备可能是有信号才进行数据通信,有些则可能是持续输出的,具体取决于对接电子秤品牌…

Leetcode sql50基础题最后的4题啦

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

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

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

《一书读懂物联网》前言

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

软件开发模型

软件的“生命周期”一般分为6个阶段,即制定计划、需求分析、设计、编码、测试、运行和维护。在软件工程中,这个复杂的过程一般用软件开发模型来描述和表示。常见的软件开发模型有:以软件需求为前提的瀑布模型,渐进式开发模型(如螺…

华为OD机试 - 跳格子3(Java JS Python C)

题目描述 小明和朋友们一起玩跳格子游戏, 每个格子上有特定的分数 score = [1, -1, -6, 7, -17, 7], 从起点score[0]开始,每次最大的步长为k,请你返回小明跳到终点 score[n-1] 时,能得到的最大得分。 输入描述 第一行输入总的格子数量 n 第二行输入每个格子的分数 sc…

【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上加上解析,以确保访问到外部地址。 …