前端深拷贝与浅拷贝区别

前端深拷贝和浅拷贝的区别

        在日常工作中，可能有很多人像我一样，并没有系统的从基础层面学习前端知识，只是针对当前流行的框架进行简单了解后，根据官网的样例进行使用并完成指定的开发工作

        在说拷贝的问题之前，我先说下数据类型：

基本数据类型：Number,  String,  Boolean, Undefined, Null Symbol（ES6中新增，暂未学习使用） 

引用数据类型：Object（也就是对象类型Object type，比如：Object 、Array 、Function 、Data等。）

首先根据自己的理解，深拷贝的概念只存在引用数据类型（object）中，下面就详细说下

基本数据类型：

例如：

let a = 1;
 b = a;

由图可知，名（a,b）和值（1）都存在栈内存中，并且当我们将a的值赋给b后，是给b新开辟了一个内存空间，所以在基本数据类型中不存在深拷贝和浅拷贝的区别,在你赋值的过程中就是给它开辟了新的栈内存空间

引用数据类型：

例如：

let obj1 = [a,b,c];
let obj2 = obj1;

由图可知，在引用数据类型中，栈中存放的是名和引用地址，我们通过指向堆中的地址，去堆中拿取对应的值，所以我们通过“=”赋值的过程中，实际是就是将obj1的引用地址赋值给了obj2，所以当我们对数据进行修改的时候，无论用“=”赋值了多少个，我们只要修改了其中的一个值，那么所有的值都会改变，这也就是所谓的浅拷贝，在现实的场景中我们有些地方需要这样去控制数据，但也有一些情况是，我们需要将对象拿出来，单独处理，这时候就涉及到了深拷贝的使用。

vue中常用的深拷贝方法：

最简单的就是使用（目前本人使用）： JSON.parse(JSON.stringify())

                                                                        如果大家有更好的办法可以评论提供下学习的链接。