前端面试:浅拷贝和深拷贝的区别?

前端面试:浅拷贝和深拷贝的区别?浅拷贝 shallowcopy 只复制指向某个对象的指针 而不复制对象本身 新旧对象共享一块内存 深拷贝 deepcopy 复制并创建一个一摸一样的对象 不共享内存 修改新对象 旧对象保持不变

 前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转

那么大家晚上好,我是今天晚上的主讲老师,我是兔哥。

前端面试:浅拷贝和深拷贝的区别?

我们在面试中经常会被问到浅拷贝和深拷贝的区别,正好群里也有在问到这个问题,于是今天就专门写一篇博客来讲解一下哈。

前端面试:浅拷贝和深拷贝的区别?

1.浅拷贝

浅拷贝是指,对基本类型的值拷贝,以及对象类型的地址拷贝

怎么讲,什么是基本类型?

在js中,我们知道的基本类型有字符串,数字,布尔值。

当我们写这样的代码,就是浅拷贝。

var a = 1; var b = a; //浅拷贝 b = 2; //改变b的值,并不会影响到a,因为浅拷贝对基本类型而言就是值拷贝 console.log(a);

a还是1,和b没有关系。

这个道理,在对象中也一样适用。JavaScript中还有对象类型(也叫引用数据类型),对象类型的浅拷贝则只是拷贝了地址。

var p1 = { name: 'jack' } var p2 = p1; p2.name = 'rose'; console.log(p1);

p2保存的是和p1一模一样的内存地址,就好像你去配了一把钥匙给张三,张三拿着钥匙一样可以去你家把冰箱里的酸奶喝了。

2.深拷贝

深拷贝是指,除了拷贝基本类型的值,还完全复刻了对象类型。

一个对象在内存中是固定存在的,我们如果要对其进行深拷贝,唯一的办法就是创建一个新的对象,里面的值完全复刻原来的对象。

还是刚才例子,我们稍加改造

var p1 = { name: 'jack' } var p2 = { name: p1.name }; p2.name = 'rose';

这样一来,我们对p2进行改造,就不会影响到p1了。这就是深拷贝。

我们用这种方法实现深拷贝是可以的,但是如果属性太多,就会很繁琐。下面讲讲如何实现深拷贝的通用方法?

3.深拷贝 Object.assign()

Object.assign()是一种可以对非嵌套对象进行深拷贝的方法,如果对象中出现嵌套情况,那么其对被嵌套对象的行为就成了普通的浅拷贝。如果没有嵌套,是可以用这个方法的。

var p1 = { name: 'jack' } var p2 = {} Object.assign(p2,p1);

还有一种类似的方法,就是用JSON进行转换

var p1 = { name: 'jack', age:12 } var p2 = JSON.parse(JSON.stringify(p1)); p2.name = 'rose';

实际开发中,可能这种方式用的更多一些,比如把一些数据转成json存储到本地缓存,需要用到的时候,我们再反序列化。

4.深拷贝递归

function deepCopy(dest,src){ var dest = dest || {}; for(var key in src){ //如果对象的属性又是对象,则递归处理 if(typeof src[key] === "object"){ dest[key]= (src[key].constructor === Array)?[]:{}; deepCopy(dest[key],src[key]); }else{ dest[key]=src[key]; } } return dest; }

测试:

var p1 = { name: 'jack', age:12, toy: { name:'car' } } var p2 = deepCopy({},p1);

前端面试:浅拷贝和深拷贝的区别?

可以看到,操作p2并不会影响到p1,这就是递归方式的深拷贝。 

今天的分享就到这里啦,也欢迎大家来我们的学习qun交流哦~~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/209126.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 上午9:58
下一篇 2026年3月19日 上午9:58


相关推荐

  • h3c路由器常用命令汇总_h3c命令手册

    h3c路由器常用命令汇总_h3c命令手册1、进入系统视图模式system-view2、为设备命名sysname3、显示当前配置displaycurrent-configuration4、中英文切换language-modeChinese|English5、进入以太网端口视图interfaceEthernet1/0/16、设置端口访问模式portlink-typeAccess|Trunk|Hybrid7、激活以太网端口undoshutdown8、关闭以太网端口shut

    2022年10月18日
    5
  • Java虚拟机:类加载机制与双亲委派模型

    Java虚拟机:类加载机制与双亲委派模型

    2021年4月10日
    196
  • Visual Studio无法打开源文件的问题

    Visual Studio无法打开源文件的问题如果你项目配置好了,添加了头文件和库文件,编译还是无法查找源文件,那有可能是你解决方案配置里选到了Debug,切换为release才能成功。

    2022年6月18日
    379
  • 前端工程配置Nginx反向代理[通俗易懂]

    前端工程配置Nginx反向代理HTTP配置HTTPS配置配置两个反向代理,一个代理http页面,一个代理https页面,前者监听80端口,后者监听443端口。配置后整个文件如下,其中有不少冗余,挑有用的看即可。#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid

    2022年3月11日
    47
  • 最小生成树的个数_最小生成树的实际应用

    最小生成树的个数_最小生成树的实际应用给定一张 N 个点 M 条边的无向图,求无向图的严格次小生成树。设最小生成树的边权之和为 sum,严格次小生成树就是指边权之和大于 sum 的生成树中最小的一个。输入格式第一行包含两个整数 N 和 M。接下来 M 行,每行包含三个整数 x,y,z,表示点 x 和点 y 之前存在一条边,边的权值为 z。输出格式包含一行,仅一个数,表示严格次小生成树的边权和。(数据保证必定存在严格次小生成树)数据范围N≤105,M≤3×105输入样例:5 61 2 11 3 22 4 33 5 4

    2022年8月10日
    9
  • js保留两位小数四舍五入_js保留两位小数不四舍五入

    js保留两位小数四舍五入_js保留两位小数不四舍五入首先我们来看2个方法:1、tofixed方法toFixed()方法可把Number四舍五入为指定小数位数的数字。但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则。银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。具体规则如下:简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。如…

    2025年6月19日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号