前端js面试会问到的浅拷贝和深拷贝（以浅拷贝为例）

红太狼 2022-12-22 11:26 175阅读 0赞

## 拷贝 ##

首先，明白拷贝的含意，拷贝在我们通俗的讲来就是复制，一般用于对象的拷贝。将一个有数据的对象的内容拷贝到一个空对象中。使两个不同的对象，拥有相同的属性，并且操作其中一个对象时，另一个对象不会改变。

## 基础知识 ##

数组和对象的赋值其实是复制的地址值，我们以数组为例：  
![基础知识][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center]  
当b数组改变时，a数组也会跟着改变  
![结果][2020112012170278.png_pic_center]

## 浅拷贝 ##

浅拷贝的实现思路：  
1.前提条件：一个带有属性的对象obj1\{\}，和一个空对象obj2\{\}  
2.怎么实现：遍历带有属性的对象obj1\{\}，并且每次都将属性拷贝到空对象obj2中  
实现代码如下  
![浅拷贝代码][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 1]

这是输出结果：  
![浅拷贝输出结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 2]  
当我们改变ojb2的属性，obj1的属性不会改变，这样就完美的将obj1对象的内容完整的拷贝到了obj1中。

**但是要注意的是** 这只是简单类型的拷贝，也可以说是单一层次的拷贝，如果，我们需要拷贝的对象里面还有一个对象和数组，结果还会是一样的吗？

比如我们在要拷贝的对象obj1中再加入一个对象，那么还能实现相同的效果吗？直接尝试！  
![带有数组和对象的对象的浅拷贝][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 3]  
运行结果如下  
![运行结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 4]  
此时看起来拷贝成功了,可是根据我们**基础知识**中的情况，我们要测试在拷贝过程中的是否存在地址值的拷贝，此时我们修改数组a，和对象b来看一下情况  
![测试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 5]  
测试结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 6]  
我们发现在浅拷贝之后如果拷贝的对象中有数组，或者嵌套了一个对象，  
那么拷贝的将是其本身的地址值，当其中一个对象的属性改变时，另一个也会跟着改变

**总结：**

浅拷贝，只能拷贝基本数据，当拷贝的对象中含有多层次结构的时候如(数组，对象之类)只将其地址值拷贝（详细去看开头的基础知识），并不会去新的开创一个内存空间，所以拷贝后的属性改变，原对象也会跟着改变。

那么深拷贝就好理解了，拷贝完成后，即使拷贝的对象含有多层次结构，不管拷贝后的数据怎么改变，原来的数据都会保持不变。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5d45631323164691816a4701ae29c86d.png
[2020112012170278.png_pic_center]: /images/20221120/8b7e525b27d64afb93bd4c56a9723c1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/8997fe8530d5466ea1ce65c2895dbb25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/76ac0d7a8a1d4c63a79f14b095e8cc98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/f8c1b81a1b714037a3c7a30b4d871cb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/edd6c8b3644448a3919e413851d75026.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/3ea038f5b33e48a888ce9b2447796240.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/c5b2d97d07264121a0941f524b3e8363.png