+ - [JSON.parse(JSON.stringify())](#JSONparseJSONstringify_82)
- * [介绍](#_96)
* [使用例子](#_100)
* [缺点](#_125)
- [Lodash的cloneDeep](#LodashcloneDeep_135)
- * [介绍](#_147)
* [使用例子](#_151)
* [缺点](#_166)
+ [手撕深拷贝](#_170)
+ - [基础版本](#_175)
- [进阶版本](#_214)
+ [参考资料](#_261)
引入
上次讲了浅拷贝,这次我们来讲深拷贝。有一说一,深拷贝也算是面试时非常常见的题目了。🐶
深拷贝的作用
首先为什么需要深拷贝,因为浅拷贝无法满足我们对原始数据完整、独立复制的需求。我们希望修改新对象不会影响原对象。
深浅拷贝的区别
这里引用
ConardLi
大佬的理解
浅拷贝
创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。
- 如果属性是基本类型,拷贝的就是基本类型的值.
- 如果属性是引用类型,拷贝的就是内存地址
所以如果其中一个对象改变了这个地址,就会影响到另一个对象。
深拷贝
将一个对象从内存中完整的拷贝一份出来
- 从堆内存中开辟一个新的区域存放新对象
- 且修改新对象不会影响原对象
深拷贝实现方式
JSON.parse(JSON.stringify())
遥记当年,我当时还是大三的时候,背了一周的面经就跑去字节面试实习生了。面试官就让我手撕深拷贝。
我当时才20刚出头,前端面经也才抱起来背了不到一周。这种题目我写的来得?
跟面试官面面相觑了半天,突然灵机一动,JSON.parse(JSON.stringfy())大法一定可以。
我当时非常开心的说出了这个答案, 面试官当时好像有点尬住了,嘴角流露出一股察摸不到的笑容。
但可能由于接受过专业的训练,也只在那短短的时间内便消失不见。🐶
介绍
JSON.parse(JSON.stringify())
,首先使用利用JSON.stringify
将对象转成JSON
字符串。 再用JSON.parse
把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。
使用例子
const a = {
name: '张三',
score:{
math: 100
}
}
const b = JSON.parse(JSON.stringify(a));
// 改变b中的对象的值
b.score.math = 60;
console.log('a的值',a);
console.log('b的值',b);
/\*\*
\* 输出的结果如下
\* a的值 { name: '张三', score: { math: 100 } }
\* b的值 { name: '张三', score: { math: 60 } }
\*/
缺点
记个TODO:下次写文章详细分析下
JSON.stringify
的缺点。
- 不会拷贝对象上为
undefined
的值 - 不能处理函数
- 不能处理正则
- 循环引用会报错
Symol
会丢失等
Lodash的cloneDeep
续借上文,面试官笑了笑,说
JSON.parse(JSON.stringify())
这个方式有如上几个缺点,你能不能换个更好的方式将这个问题解决呢?这又一次的让我陷入了思索,又开始了与面试官的面面相觑😅。突然我想起了以前用的Lodash,其中有一个NB的方法。
cloneDeep
,当时我洋洋得意,心想lodash
库的方法,总不可能还有缺点吧?此时,面试官的表情稍稍有点微妙,我的第六感告诉我,我好像答错了,不过我认为我回答的没问题呀。
晌久,面试官叹了口气说,我是让你手撕,手撕懂吗?
介绍
_.cloneDeep
是lodash
库提供的深拷贝的方法,非常实用,建议背诵😂。
使用例子
import \* as _ from "lodash";
const a = {
name: "张三",
score: {
math: 100,
},
};
const b = _.cloneDeep(a);
缺点
暂无,🐮的lodash库,🐮的cloneDeep函数。
手撕深拷贝
诶,还是得手撕呀,来吧来吧,还是得给面试官露一手的😜
基础版本
多年面试经验告诉我,一般写出这个版本,几乎都让过了,顶多在回答一下循环引用问题如何解决。一般不太会让写一个比较完美的深拷贝的。🐶
- 首先,我们要拷贝的数据类型有两种,分别是
Array
和Object
- 如果对象里的属性还是对象,那么采用递归对这个对象再进行拷贝
- 如果对象里的属性不是对象,那么直接返回即可。
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些前端面试题以及学习路线给大家
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-w1kK29Ax-1712929887939)]
[外链图片转存中…(img-B7QG9hht-1712929887939)]
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-Q208GDFt-1712929887940)]