JS-浅拷贝与深拷贝

本文将会讲解什么是深拷贝，什么是浅拷贝，以及怎么实现。浅拷贝只复制一层数据的属性，而深拷贝则复制一层数据的属性，以及数据中的子对象。

浅拷贝实现：

 1        let obj1 = {
 2             name: "summer",
 3             age: 18,
 4             dog: {
 5                 name: "potato",
 6                 color: "yellow"
 7             }
 8         }
 9         //声明一个空对象
10         let obj2 = {}
11         
12         function extend(a, b) {
13             //遍历原对象obj1
14             for (let key in a) {
15                 b[key] = a[key]
16             }
17         }
18         extend(obj1, obj2)
19         obj1.name = "autumn"
20         obj1.dog.name = "sweet potato"
21         console.dir(obj1) //name: "autumn" age: 18 dog: {name: "sweet potato", color: "yellow"}
22         console.dir(obj2) //name: "summer" age: 18 dog: {name: "sweet potato", color: "yellow"}

可以看出，拷贝成功，改变obj1.name,obj2.name并没有受影响，但是深层的子对象会受影响

实现浅拷贝的方法

1.Object.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，然后返回目标对象

注意：拷贝的是源对象的引用，而不是目标本身

2.spread()

3.Array.prototype.slice() 和 .Array.prototype.concat() 数组方法

深拷贝实现：

 1       let obj1 = {
 2             name: "summer",
 3             age: 18,
 4             dog: {
 5                 name: "potato",
 6                 color: "yellow"
 7             }
 8         }
 9         //声明一个空对象
10         let obj2 = {}
11 
12         function extend(a, b) {
13             for (let key in a) {
14                 var item = a[key]
15                 //判断数据类型
16                 if (item instanceof Object) {
17                     //声明一个空对象，然后递归extend函数，并且把item的值赋值给b[key]
18                     b[key] = {}
19                     extend(item, b[key])
20                 } else if (item instanceof Array) {
21                     b[key] = []
22                     extend(item, b[key])
23                 } else {
24                     b[key] = item
25                 }
26             }
27         }
28         extend(obj1, obj2)

实现深拷贝的方法：

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

2.jQuery.extend()

3.lodash.cloneDeep()

总结：