JS中浅拷贝和深拷贝的几种实现方式

约定不等于承诺〃 2021-09-02 05:08 348阅读 0赞

# 概念 #

深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象。它们最根本的区别在于是否真正获取了一个对象的复制实体，而不是引用。简单来说，假设B复制了A，当修改B时，看A是否会发生变化，如果A变了，说明是浅拷贝；如果A没变，那就是深拷贝

# 浅拷贝 #

###### 1. 用 = 号赋值引用地址 ######

![20200924110351914.png][] ![20200924110412854.png][]

###### 2. for…in ######

被循环的对象存在嵌套对象时为浅拷贝

![20200924111306939.png][] ![20200924111326505.png][]

###### 3. Object.assign() ######

① Object.assign()只有源对象，没有目标对象时为浅拷贝

![20200924111847856.png][] ![20200924111907939.png][]

② Object.assign() 是一种可以对非嵌套对象进行深拷贝的方法，如果对象中出现嵌套情况，那么其对被嵌套对象的行为就成了普通的浅拷贝

![20200924112620851.png][] ![20200924112638657.png][]

# 深拷贝 #

###### 1. JSON.parse(JSON.stringify()) ######

![20200924113118524.png][] ![20200924113133788.png][]

**注意：这种方式无法拷贝 正则表达式，undefine，function**

###### 2. for…in ######

被循环的对象不存在嵌套对象时为深拷贝

![20200924113343725.png][] ![20200924113359404.png][]

###### 3. Object.assign() ######

Object.assign() 方法只复制源对象中可枚举的属性和对象自身的属性。如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖

![20200924113611217.png][] ![20200924113624529.png][]

###### 4. 递归 ######

递归拷贝所有层级属性

![20200924113933206.png][] ![20200924113955686.png][]

###### 5. $.extend() ######

通过 jQuery 的 extend() 方法实现深拷贝，第一个参数 true 为深拷贝，false 为浅拷贝

![20200924114148612.png][] ![2020092411420399.png][]

###### 6. slice() ######

slice() 对数组进行深拷贝

let arr = [1, 2, 3, 4, 5, 6];
    
    let arr2 = arr.slice(0);
    
    arr2[0] = 'Rose';
    arr2[1] = '女';
    
    console.log('arr', arr); // [1, 2, 3, 4, 5, 6]
    console.log('arr2', arr2); // ["Rose", "女", 3, 4, 5, 6]

###### 7. concat() ######

concat() 对数组进行深拷贝

let arr = [1, 2, 3, 4, 5, 6];
    
    let arr2 = arr.concat();
    
    arr2[0] = 'Rose';
    arr2[1] = '女';
    
    console.log('arr', arr); // [1, 2, 3, 4, 5, 6]
    console.log('arr2', arr2); // ["Rose", "女", 3, 4, 5, 6]

[20200924110351914.png]: https://img-blog.csdnimg.cn/20200924110351914.png
[20200924110412854.png]: /images/20210813/6626f44215f54c02a118d94ed16c6fc7.png
[20200924111306939.png]: https://img-blog.csdnimg.cn/20200924111306939.png
[20200924111326505.png]: /images/20210813/fbaf7e0ca6b048f5b42820eae68fa01f.png
[20200924111847856.png]: https://img-blog.csdnimg.cn/20200924111847856.png
[20200924111907939.png]: /images/20210813/c226e984abae499fb93828ee91a9e716.png
[20200924112620851.png]: https://img-blog.csdnimg.cn/20200924112620851.png
[20200924112638657.png]: /images/20210813/1e90eaba59db4b9cb083d9aaaa48ebdb.png
[20200924113118524.png]: https://img-blog.csdnimg.cn/20200924113118524.png
[20200924113133788.png]: /images/20210813/d77dbab965d9478980696f615020e073.png
[20200924113343725.png]: https://img-blog.csdnimg.cn/20200924113343725.png
[20200924113359404.png]: /images/20210813/f4db2ab0a2474d58b599d5f527b7d7d6.png
[20200924113611217.png]: https://img-blog.csdnimg.cn/20200924113611217.png
[20200924113624529.png]: /images/20210813/acc68c1430544debbda58223fb47249d.png
[20200924113933206.png]: https://img-blog.csdnimg.cn/20200924113933206.png
[20200924113955686.png]: /images/20210813/bdd1f54985614341af082785ac974fd7.png
[20200924114148612.png]: https://img-blog.csdnimg.cn/20200924114148612.png
[2020092411420399.png]: /images/20210813/e45bca1c5efa4cfba70bc445f0635d09.png