es6深拷贝_javascript之浅拷贝与深拷贝

b7b9aa6c74fa171c28c2b903aa60e00e.png

好久没提笔写文章了,之前忙得喘不过气,过年回家也无心学习。年后回来后,调整好状态,准备把js基础重新过一遍。

正文从此开始:

之所以写这篇文章是因为Leader最近在面试,回来和我们数落了一通,问一个对前端深浅拷贝的问题,很多人都吱吱呜呜的囫囵吞枣,更有甚者说Object.assign()就是深拷贝的方法。问到能不能说说深拷贝方法的实现思路,也是说不出个所以然。不得不说,现在很多同学对js的基础这块还不够扎实呀,想着当初吃过这个问题的亏,就提笔写一篇文章,全权当巩固一下学过的知识,以后拿起来看的时候,也能心中有数。

Object.assign()

说起这个方法,其实它是个前拷贝的方法,自己去浏览器控制台验证一下就知道了

var 

解释一下,上面这串代码块把test1复制给了 test2,并且修改了 test1 的 a 属性和 c 属性的 d属性,最后输出的 test2 里 a 属性没变,但是 c 属性的 d 属性也跟着变了。

这是因为 Object.assign() 方法只是拷贝了第一层,而对于属性是一个对象的,就是引用其地址,所以 test1 和 test2 的 c 属性同时指向同一个地址,改变 test1 也会改变相应的 test2

同理ES6展开运算符...

也是一个浅拷贝,效果和 Object.assign() 是一样的

真正在代码业务中常用的深拷贝是JSON.parse(JSON.stringify(obj))

用代码去验证一下

var 

答案就是改变了 test1 的 c 属性的 d 属性,test2 没变,说明 test2 已经开辟了一个新的地址去存储 c 属性的指,两个变量互不影响。

但是事情并没有那么简单啊,这个方法的局限性还是有一些的,比如属性中存在正则运算符、undefined、不能序列化函数、不能解决循环引用的对象。

但是在项目中,JSON.parse(JSON.stringify(obj))这种方式已经是比较够用的,如果真的需要拷贝函数等其他属性的话,那就推荐去使用lodash的深拷贝方法吧,毕竟人家是专业的。

说到这那么就来一波常规操作,手撸一个简易版的深拷贝吧

// 判断是否是对象

当然这是相对较简单的深拷贝实现方式,更复杂的还需要考虑很多情况,在这不做深究。

希望对正在找新工作面试的同学有所帮助。有不对之处望不吝赐教。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值