深拷贝和浅拷贝实现方法以及优缺点

深拷贝和浅拷贝：

// 1.浅拷贝只是拷贝了引用, 数据在内存中还是一个, 如果引用的对象发生了变化, 该变量也会同步变化.
// 2.深拷贝相当于把内存上的数据拷贝了一份, 此时修改该变量不会影响原来的变量, 同理修改原来的变量也不会影响现在的变量.

浅拷贝的实现方法：
const A = { name: '小明', name1: '小李' };
const B = A;
A.name = "隔壁老王";
console.log(A);
console.log(B);
console.log(A == B); //true

深拷贝三种方式：
//方法一：Json.parse(Json.stringify(A))
const A = { name: '小明', name1: '小李' };
const B = JSON.parse(JSON.stringify(A));
B.name = "隔壁老李";
console.log(A);
console.log(B);
console.log(A == B);//false

缺点：JSON.parse(JSON.stringify(A)) 方法缺陷是不能拷贝函数

方法二、使用jquery的$.extend方法也可以实现深拷贝 但在react和vue.js不能使用Dom元素操作
当第一个参数填true的时候是一个深层次的拷贝
第二个参数需要合并的对象
第三个参数 第四个参数......被合并的对象
var obj = {a:10,datas:{goodsName:"香蕉",price:88}};
var newObj = $.extend(true,{},obj);
newObj.datas.price = 99;
console.log(newObj,obj);

缺点：开辟内存空间拷贝每一个节点身上的数据 浪费性能

//方法三：递归实现
var obj = {
	name:"小明",
	id:"前端工程师",
	fn:function(){
		return{'action':"很喜欢运动"}
	}
}
function deepCopy(obj){
let newObj = null;
	if(typeof (obj) == 'object' && obj !== 'null'){
	newObj = obj instanceof Array?[]:{};
	for(var key in obj){
	newObj[key] = deepCopy(obj[key]);
	}
}else{
		newObj = obj;
		}
	return newObj;
}

var obj1 = deepCopy(obj);
obj1.name = '小李';

console.log(obj1==obj);
console.log(obj);
console.log(obj1);
console.log(obj1.fn().action)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64