JavaScript深拷贝和浅拷贝

我会带着你远行 2023-06-09 15:22 60阅读 0赞

*  首先我们看一下如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化
    
     *  ①如果B也跟着变了，说明这是浅拷贝，功力不够
     *  ②如果B没变，那就是深拷贝，自食其力，修成正果
 *  接下来会分别阐述栈堆，基本数据类型与引用数据类型，这些概念能帮助**理解深拷贝与浅拷贝**。

## 浅拷贝案例 ##

*  首先举个浅拷贝例子：  
    ![在这里插入图片描述][20191021185615124.png]  
    有人可能会问：明明b复制了a，为啥修改数组a，数组b也跟着变了。这里就得引入**基本数据类型与引用数据类型**的概念了。

## 数据类型 ##

**基本数据类型：**

*  number，string，boolean，null，undefined

**引用数据类型：**

*  array，object，函数

## 数据存储 ##

基本类型–名值存储在栈  
内存中，例如let a=1;  
![在这里插入图片描述][20191021185920212.png]  
当b=a复制时，栈内存会新开辟一个内存，例如这样：

![在这里插入图片描述][20191021190028929.png]  
所以此时修改a=2，对b并不会造成影响，因为此时的b已自食其力，翅膀硬了，不受a的影响了。当然，let a=1,b=a;虽然b不受a影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。

## 数据存储 ##

**引用数据类型**–名存在**栈内存**中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向**堆内存**中的值，以上面浅拷贝的例子画个图：  
![在这里插入图片描述][2019102119022570.png]  
当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。  
![在这里插入图片描述][20191021190256183.png]  
**引用数据类型–概念图**

*  当a\[0\]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。  
    ![在这里插入图片描述][20191021190423968.png]
 *  要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了
 *  ![在这里插入图片描述][20191021190445598.png]

## 深拷贝 ##

*  （1）slice()不带任何参数，默认返回一个长度和原数组相同的新数组  
    ![在这里插入图片描述][20191021190533819.png]
 *  （2）concat()不带任何参数，把返回数组和一个空数组合并后返回，即返回一个长度和原数组相同的新数组  
    ![在这里插入图片描述][2019102119055386.png]
 *  （3）直接遍历，添加到空数组  
    ![在这里插入图片描述][20191021190623271.png]
 *  （4）ES2015，ES6三点扩展运算符  
    ![在这里插入图片描述][20191021190744546.png]
 *  复制数组  
    ![在这里插入图片描述][20191021190713276.png]  
    **以上几种方法都实现了一级拷贝，为什么叫一级拷贝？**
 *  将上述案例，简单修改下，数据结构嵌套，做两层嵌套  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]  
    **验证后发现之前的几种方法只能拷贝一级数据，那如何拷贝所有层级呢？**
 *  接下来介绍两种常用的方案
    
     *  ①jquery的extend
     *  ②JSON的序列化和反序列化  
        **（1）JQ的extend方法**  
        **语法：$.extend( \[deep \], target, object )**
 *  ①deep表示是否深拷贝，为true为深拷贝，为false为浅拷贝
 *  ②target目标对象，其他对象的成员属性将被附加到该对象
 *  ③object拷贝源对象  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]
 *  单词：extend延伸  
    **（2）JSON的序列化和反序列化**  
    **语法：JSON.parse(JSON.stringify(XXXX))**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  实现原理：先将对象转为一个基本数据类型，再执行拷贝

## 深拷贝和浅拷贝的区别 ##

*  （1）浅拷贝： 将原对象或原数组的**引用**直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
 *  （2）深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）**拷贝**过来，是“值”而不是“引用”

## 深拷贝相关 ##

**（1）为什么要使用深拷贝？**

*  希望在改变新的数组（对象）的时候，不改变原数组（对象）

**（2）怎么检验深拷贝成功？**

*  改变任意一个新对象/数组中的属性/元素, 都不改变原对象/数组

**以上就是深拷贝和浅拷贝的见解，有问题留言小编，嘿嘿…**

[20191021185615124.png]: /images/20230531/0b7767e2dd434e1bba0927df353e3b4b.png
[20191021185920212.png]: /images/20230531/6bd748163b3641928015120cded07f5c.png
[20191021190028929.png]: /images/20230531/e40a0ae59ac54b73b9a167224e0e605e.png
[2019102119022570.png]: /images/20230531/54c88f8c56af454abd1404b39398f9ed.png
[20191021190256183.png]: /images/20230531/d3e8b0e3913840a9b6f05554b23c9664.png
[20191021190423968.png]: /images/20230531/3686322343604e6eb8ab32aa88310f46.png
[20191021190445598.png]: /images/20230531/ad8eb9e3cd414cb08136dfb37cddbd26.png
[20191021190533819.png]: /images/20230531/4ff84cb1a99e409281567ebd9aa770c6.png
[2019102119055386.png]: /images/20230531/217bd74f37bc417ebde626d9ea72c921.png
[20191021190623271.png]: /images/20230531/f58ab11e36ac40fdbf41c9d411975fbf.png
[20191021190744546.png]: /images/20230531/f40db95b1b034185a7f872060d975ce5.png
[20191021190713276.png]: /images/20230531/f89f1bbd055d4092b39a69751f7b2f71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/000152ba48a44368abecfcf76e8718d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/7734a3999c9042688ca4d4578094a529.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/164b1f6ed6be425ba932e7fec7d680ec.png