目录
一、基本概念
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
到此这篇js深拷贝和浅拷贝概念（js浅拷贝和深拷贝什么时候用）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/19398.html