引入
上次讲了浅拷贝，这次我们来讲深拷贝。有一说一，深拷贝也算是面试时非常常见的题目了。🐶
深拷贝的作用
首先为什么需要深拷贝，因为浅拷贝无法满足我们对原始数据完整、独立复制的需求。我们希望修改新对象不会影响原对象。
深浅拷贝的区别
这里引用
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); **自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。** **深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！** **因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**       **既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！** **由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新** **如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）**  ### 文末 从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。 个人将这段时间所学的知识，分为三个阶段： 第一阶段：HTML&CSS&JavaScript基础  第二阶段:移动端开发技术  第三阶段:前端常用框架  * 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题； * 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。 **一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**  习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题； * 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。 **一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！** [外链图片转存中...(img-EMWmPVNP-1712929863319)]
