大家好，我是讯享网，很高兴认识大家。



 <p id="main-toc"><strong>目录</strong></p> 

讯享网

一、基本概念

1、ECMAScript 数据类型划分：

2、typeof 运算符的返回值：

3、程序内存操作 栈和堆：

二、浅拷贝与深拷贝

1、浅拷贝：

2、深拷贝：

三、使用场景

1、例如：

2、扩展：

---

1、ECMAScript 数据类型划分：

            * 简单类型（基础类型、原始类型）：Number、String、Boolean、Undefined、Symbol(SE6新增的)；

            * 引用类型（复杂类型、复合类型）：Object(Math、Null、Function{ Array、Set、Map、Date、RegExp } )；

2、typeof 运算符的返回值：

            * number、string、boolean、symbol、object、function、undefined；

        其中：  number(Number | NaN | Infinity)、string、boolean(true | false | 1 | 0)、symbol、object（Object | Null | Array）、function(Date | eval | … )、undefined；

3、程序内存操作 栈和堆：

栈（Stack）与堆（Heap）是开发人员必须面对的两个概念，在理解这两个概念时，需要放到具体的场景下，因为不同场景下，堆与栈代表不同的含义。一般情况下，有两层含义：

（1）内存操作场景下，堆与栈表示两种内存的管理方式；

（2）数据结构场景下，堆与栈表示两种常用的数据结构；

更多关于js栈和堆信息如下：

通过堆栈的概念，我们更容易理解代码的一些执行方式。这里说的是在程序内存操作(布局)场景下的栈与堆：

堆栈空间分配区别：

（1）栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；从问速度上来看：存在栈中的数据访问速度快，因为栈中直接存储变量的值。

讯享网

（2）堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；从问速度上来看：存在堆中的数据访问速度略慢(基本感觉不到)，因为在访问复杂类型数据时，需要先访问栈拿到该堆的存储地址，再在堆中去取数据。

 （1）简单类型的数据在变量中直接存的就是值（栈里面直接开辟一个存储空间，存放的就是其值的本身）。

（2）复杂类型的数据在变量中存的是内存地址（在栈里存放的是地址[十六进制表示] ，这个地址再指向堆里面的数据[真正的对象实例是放到堆里面的]），由于复杂数据类型存储时变量中所存储的是内存地址（引用），因此又叫它引用数据类型。

        从以上两点来看，关于变量在栈与堆中的存放方式，可以总结为：简单数据类型放在栈里面，复杂数据类型放到堆里面的。

在了解JS深拷贝之前，还需要先了解以下2个概念！

传值：

表示传递的是变量所赋的值（就是当一个变量的值 赋给 另一个新变量的时候，新变量修改了值，不会影响原来变量的值）

【简单来说：就是相当于把变量的值 全新的复制了一个份】。

讯享网

 上面代码中，a变量 原来给它赋的初始值是666，然后又将变量a赋给了变量b，最后把变量a又重新赋值为888，可以看到变量b的值还是原来的666！这就是传值（在JS中只对Number、String、Booleanl等基本数据类型有效）

传址：

表示传递的是变量所在的内存地址【内存地址：也就是所谓的指针】因为：堆是传址操作。因此，改变堆的值，所有引用该堆的变量的值都会发生改变（简单来讲：就是当一个变量的值 赋给 另一个新变量的时候，新变量修改了值，那么原来变量的值也会被修改，因为它们是同一个内存地址，所以一改全改）

【简单来说：就是类似给变量起了一个新的名字(别名)，但实际上还是原来的存储空间】。

面代码中，a变量 原来给它赋的初始值是，然后又将变量a赋给了变量b，最后把变量a又重新赋值，可以看到变量b的值也一起被修改了（因为变量a和变量b它们俩都是指向同一个内存空间，自然所存的内容也是一样的，一改全改）！这就是传址（在JS中如Array、Object[Function …]等复杂类型）

所以：一般情况下：简单(基本)类型赋值是 传值 ！！， 复杂(复合、引用)类型赋值是 传址！！

无论是浅拷贝还是深拷贝，其本质还是赋值，原理就是将复杂类型（在实际应用场景中，主要就是对Object {} 或 Array [] 这两种类型的操作最多），如：多维数组、对象等一层一层的拆开后再一个一个的进行赋值。

1、浅拷贝：

当对某个数据（数组或对象）进行拷贝后，修改新数据（拷贝后的数据）里面第1层的数据是不会影响老数据（被拷贝的数据）的，但是如果还要第2层 或 更深层次的数据（复杂数据类型），它仍然是有关联的，如果修改了新数据，那么老数据也会被修改。

浅拷贝方式1：扩展运算符 ...

讯享网

浅拷贝方式2：对象合并Object.assign()

从以上的两个实例中可以看出，浅拷贝只是拷贝了复杂数据类型 数据、对象的第一层，如果是更深层次的数据对象就是拷贝引用。

根据上面浅拷贝的问题，此时：下面的深拷贝就排上用场了。

2、深拷贝：

        * 就是在拷贝数据（数组或对象）时，不管数据对象里面有多少层，是简单 还是 复杂数据类型，只要进行深拷贝后，和老数据（之前被拷贝的数据）就毫无关联，相互独立（重新开辟内存空间），互不影响！在修改新数据，对老数据毫无影响。

        * 作用：打断两个对象或数组之间的引用关系！

        * 原理：在对数组或对象进行拷贝，使用递归循环复制，而每次递归都是开辟一个新的内存地址（指针），所以一般只要不是同一个内存地址，就不会修改其值。

        * 简单来讲：当拷贝一个数据后，和原来的数据就没有任何联系了，因为它们不是同一个指针。

 深拷贝方式1：JSON.parse(JSON.stringify( )) 序列化

该方式最大的缺点就是在对象中不能有循环引用！！

深拷贝方式2：deepCopy() 自定义方法

该方式可以完美支持所有复杂类型的深度贝后！！

通过以上测试，无论我们是对数组 还是 对象进行深拷贝后，修改了新的数组 或 对象后，不会对旧的数组或对象进行修改，它们都是相互独立的！

无论是浅拷贝还是深拷贝，一般都用于操作Object 或 Array之类的复合类型。

1、例如：

比如：想对某个数组 或 对象的值进行修改，但是又想保留原来数组 或 对象的值不被修改！

此时：就可以用深拷贝来创建一个新的数组 或 对象，从而达到操作(修改)新的数组 或 对象时，保留原来数组 或 对象。

2、扩展：

在JS中还有一些原生封装好的浅拷贝方法：

如数组方法：concat()，filter()，slice()，map()等。

它们在修改数组时，不会修改原来的数组，而是返回一个新的数组。

除此以外，在还有一些其他第三方的深拷贝插件：clone-deep