实现深拷贝的几种方法

1.我们怎么去实现深拷贝呢,这里可以递归递归去复制所有层级属性。

这么我们封装一个深拷贝的函数(PS:只是一个基本实现的展示,并非最佳实践)
复制代码

function deepClone(obj){let objClone = Array.isArray(obj)?[]:{};if(obj && typeof obj==="object"){for(key in obj){if(obj.hasOwnProperty(key)){//判断ojb子元素是否为对象,如果是,递归复制if(obj[key]&&typeof obj[key] ==="object"){objClone[key] = deepClone(obj[key]);}else{//如果不是,简单复制objClone[key] = obj[key];}}}}return objClone;
}    
let a=[1,2,3,4],b=deepClone(a);
a[0]=2;
console.log(a,b);

复制代码

可以看到

跟之前想象的一样,现在b脱离了a的控制,不再受a影响了。

这里再次强调,深拷贝,是拷贝对象各个层级的属性,可以看个例子。JQ里有一个extend方法也可以拷贝对象,我们来看看

let a=[1,2,3,4],b=a.slice();
a[0]=2;
console.log(a,b);

那是不是说slice方法也是深拷贝了,毕竟b也没受a的影响,上面说了,深拷贝是会拷贝所有层级的属性,还是这个例子,我们把a改改

let a=[0,1,[2,3],4],b=a.slice();
a[0]=1;
a[2][0]=1;
console.log(a,b);

拷贝的不彻底啊,b对象的一级属性确实不受影响了,但是二级属性还是没能拷贝成功,仍然脱离不了a的控制,说明slice根本不是真正的深拷贝。

这里引用知乎问答里面的一张图

第一层的属性确实深拷贝,拥有了独立的内存,但更深的属性却仍然公用了地址,所以才会造成上面的问题。

同理,concat方法与slice也存在这样的情况,他们都不是真正的深拷贝,这里需要注意。

2.除了递归,我们还可以借用JSON对象的parse和stringify
复制代码

function deepClone(obj){let _obj = JSON.stringify(obj),objClone = JSON.parse(_obj);return objClone
}    
let a=[0,1,[2,3],4],b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

复制代码

可以看到,这下b是完全不受a的影响了。

附带说下,JSON.stringify与JSON.parse除了实现深拷贝,还能结合localStorage实现对象数组存储。有兴趣可以阅读博主这篇文章。

localStorage存储数组,对象,localStorage,sessionStorage存储数组对象

3.除了上面两种方法之外,我们还可以借用JQ的extend方法。

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝

target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。

let a=[0,1,[2,3],4],
b=$.extend(true,[],a); a[0]=1; a[2][0]=1; console.log(a,b);

可以看到,效果与上面方法一样,只是需要依赖JQ库。

说了这么多,了解深拷贝也不仅仅是为了应付面试题,在实际开发中也是非常有用的。例如后台返回了一堆数据,你需要对这堆数据做操作,但多人开发情况下,你是没办法明确这堆数据是否有其它功能也需要使用,直接修改可能会造成隐性问题,深拷贝能帮你更安全安心的去操作数据,根据实际情况来使用深拷贝,大概就是这个意思。

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

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

相关文章

投资合伙人股份分配_合伙人股权分配,你必须知道的三大要点!

原标题:合伙人股权分配,你必须知道的三大要点!随着社会的发展,越来越多的年轻人选择创业,也有很多人选择合伙创办企业,但是很多也是因为股权和钱如何分的问题最后不欢而散,合伙创办企业好处很多…

前端-给定一个字符串str,如何实现每个单词首字母都大写,其余部分小写。

确保字符串的每个单词首字母都大写&#xff0c;其余部分小写。 function f(str){ var arr str.toLowerCase().split(" “); //转小写&#xff0c;分割成字符串数组 for(var i0; i<arr.length; i){ arr[i] arr[i].charAt(0).toUpperCase()arr[i].slice(1); //重新组合…

计算机无法同步时间,为什么在Win7中无法同步计算机时间?

[文章摘要]在win7中&#xff0c;为什么不能同步计算机时间&#xff1f;有什么解决办法吗&#xff1f;接下来&#xff0c;我将向您介绍为什么无法在win7中同步计算机时间的主要症状&#xff0c;可能的原因和解决方法.在win7中&#xff0c;为什么不能同步计算机时间&#xff1f;有…

中国移动集中化BI探索:数据仓库与Hadoop混搭

随着移动互联网、物联网/传感器等技术的发展&#xff0c;全球数据生产速度正在高速增长&#xff0c;信息已成为企业的战略资产。而运营商作为网络时代的数据交换中心&#xff0c;其网络管道、业务平台、支撑系统中每天都在产生大量有价值的数据&#xff0c;基于这些数据的商业智…

计算机管理器win8.1,没事折腾?Win8.1文件管理器设置几招

有人说玩系统的高端表现就是在保证运行的前提下上没事折腾&#xff0c;今天就支几招Win8.1文件管理器的设置技巧给大家。可能有些人对捣鼓系统感到不解&#xff0c;在他们看来这种举动就像是折腾&#xff0c;明明拿来就能用的东西非要动手改造一下。其实对于中高级用户来说&…

Linux下如何创建loop device

在Linux中&#xff0c;有一种特殊的块设备叫loop device,这种loop device设备是通过影射操作系统上的正常的文件而形成的虚拟块设备 。因为这种设备的存在&#xff0c;就为我们提供了一种创建一个存在于其他文件中的虚拟文件系统的机制.下面是一个示例: 第一步&#xff1a;用dd…

在职研究生和全日制研究生的区别_“在职研究生”与“全日制研究生”有什么区别?...

“硕士研究生”是介于本科与博士之间的一个学位&#xff0c;与本科教育相比&#xff0c;研究生教育更加注重培养学生研究问题和分析问题的能力。在我国&#xff0c; 研究生可以分为两种形式&#xff1a;在职研究生、全日制研究生。其中&#xff0c;报考“在职研究生”是社会工作…

计算机多媒体设计徽章,酷毙了:Hackaday将会议徽章设计成一台可编程的电脑

Hackaday徽章可以直接挂在你的脖子上&#xff0c;但看起来更像一台小型的掌机&#xff0c;这是Hackaday Superconference的徽章。参加会议的每个人都获得这种徽章&#xff0c;它具有320 x 240彩色显示屏&#xff0c;完整的qwerty键盘和无限的可编程潜力&#xff01;内置的固件运…

后来的我们王俊凯王源机器人_王俊凯杨紫到底是什么关系

先说结论——中餐厅里的梳头姐弟之所以动人&#xff0c;是因为纯粹、纯净、真挚。 既和深厚等词不搭边&#xff0c;也不是cp。下面来分析。一先说最关注的&#xff0c;两人到底有没有情愫&#xff0c;是不是cp。如果有情愫的话&#xff0c;王俊凯对待杨紫会比对其他人优待。对比…

进程间通信管道进阶篇:linux下dup/dup2函数的用法

由于利用管道实现进程间通信&#xff0c;是通过创建两个文件描述符&#xff0c;但是描述符的初始化是通过随机的&#xff0c;就是从可用的文件描述符中取出&#xff0c;并将可用的文件描述符与file对象相关联&#xff0c;如果我们需要将管道的两头与其他的流相关时&#xff0c;…

浙江大学计算机博士申请考核,考博经验|2020年浙江大学博士申请考核经验分享...

原标题&#xff1a;考博经验&#xff5c;2020年浙江大学博士申请考核经验分享本文系"研海拾珠"公众号原创&#xff0c;获取更多考博资料考博经验请移步公众号平台。作者 |Domin &#xff0c;浙江大学博士朝着目标坚定不移自我上学起&#xff0c;我爸妈就告诉我好好学…

python模拟购物车购物过程_Python 模拟购物车的实例讲解

1.功能简介此程序模拟用户登陆商城后购买商品操作。可实现用户登陆、商品购买、历史消费记查询、余额和消费信息更新等功能。首次登陆输入初始账户资金&#xff0c;后续登陆则从文件获取上次消费后的余额&#xff0c;每次购买商品后会扣除相应金额并更新余额信息&#xff0c;退…

西北大学计算机排行,世界排名领先,西北大学到底有多厉害?

原标题&#xff1a;世界排名领先&#xff0c;西北大学到底有多厉害&#xff1f;西北大学作为综排TOP9的美国名校&#xff0c;是许多留学生选择名校得最佳选择之一。那么作为世界排名领先的西北大学到底有多厉害&#xff1f;接下来立思辰留学云小编为你详细介绍。西北大学专业排…

Linux下的top命令

CSDN 阳光岛的文章&#xff1a; http://blog.csdn.net/sunboy_2050/article/details/6129177 最近使用了k命令杀死出bug的python进程&#xff08;cpu占用100%&#xff0c;ubuntu10的bug&#xff09;转载于:https://www.cnblogs.com/wolfsky/articles/2848702.html

是什么东西_隐形牙套附件是什么东西?

最近有一部分小宝贝收到牙套准备初佩戴啦&#xff01;但是有些小宝贝有疑惑了&#xff1a;粘在牙齿上的小凸点是什么东西&#xff1f;为什么要在牙齿上粘这个东西&#xff1f;微微细细询问后&#xff0c;原来让围观群众和正在矫正的同学们一脸懵b的就是——附件。什么是附件&am…