深拷贝与浅拷贝

深拷贝与浅拷贝

概念：浅拷贝只是复制了对象的引用地址，两个对象指向了同一个内存地址，只要修改其中任何一个对象的值，另外一个也会随之改变。
深拷贝是将对象及值复制过来，两个对象中的值进行修改都不会影响另外一个，这就是深拷贝。

基本类型–名值存储在栈内存中，例如 let a = 1;，b = a;，栈内存会新开辟一个内存，所以当 a = 2;，对 b 并不会造成影响。但是这并不是深拷贝，深拷贝本身只针对较为复杂的 object 类型数据。
引用数据类型–名存在栈内存中，值存于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值。

当 b = a 进行拷贝时，复制的是 a 的引用地址，而并非堆里的值。

而当 a[0] = 1 进行数据修改的时候，由于 a 和 b 指向的是同一个地址，所以自然 b 也受了影响，这就是所谓的浅拷贝。

那要是在堆内存中也开辟一个新的内存专门为 b 存放值，就像基本类型那样，岂不是就可以达到深拷贝的效果了。

实现深拷贝的方法

递归

递归：封装一个深拷贝的函数

function deepClone (obj) {
	let objClone = Array.isArray(obj)?[]:{};
	if(obj && typeof obj === 'object'){
		for(key in obj){
			if(obj.hasOwnProperty(key)){
				//判断obj的子元素是否为对象，如果是，递归复制
				if(obj[key] && typeof obj[key] === 'object'){
					objClone[key] = deepClone(obj[key]);
				}else{
					//如果不是，简单复制
					objClone[key] = obj[key];
				}
			}
		}
	}
	return objClone;
}
let a = [1,2,{name: 'zhangsan',age: 24},4]
b = deepClone(a)
a[0] = 2;
a[2].age = 26
console.log(a,b)

这里再次强调，深拷贝，是拷贝对象各个层级的属性，可以看个例子。

let a = [1,2,3,4];
let b = a.slice();
a[0] = 2;
console.log(a,b)

那是不是说 slice 也是深拷贝呢，毕竟 b 也没受 a 的影响，但是我们再把 a 改改；

let a = [1,2,[3,4],5];
let b = a;
a[0] = 2;
a[2][1] = 6;
console.log(a,b)

这时候可以发现，拷贝的不彻底，b 对象的一级属性确实不受影响了，但是二级属性还是没有拷贝成功，仍然脱离不了 a 的控制，说明 slice 不是真正的深拷贝。
同理，concat 方法与 slice 也存在这样的情况。不是真正的深拷贝。

JSON对象的parse和stringify

function deepClone (obj) {
	let _obj = JSON.stringify(obj);
	let objClone = JSON.parse(_obj);
	return objClone
}
let a = [1,2,[3,4],5];
let b = deepClone(a);
a[0] = 2;
a[2][1] = 6;
console.log(a,b)

可以看到这下 b 是完全不受 a 的影响了。
但是缺陷比较明显：当 Object 或 Array 中值为 undefined、所有函数以及 symbol 时，JSON.stringify(obj) 将 Object 序列化时会忽略这些值，JSON.stringify(obj) 将 Array 序列化时会将这些值转化为 null，但是该方法足以应对简单的不含有上述值的对象了。

function deepClone (obj) {
	let _obj = JSON.stringify(obj);
	let objClone = JSON.parse(_obj);
	return objClone
}
let a = {
	name: 'xxx',
	eat: function () {
		alert('吃饭了')
	},
	age: undefined,
 };
let b = deepClone(a);
console.log(a)
console.log(b)

function deepClone (obj) {
	let _obj = JSON.stringify(obj);
	let objClone = JSON.parse(_obj);
	return objClone
}
let a = [1,function(){alert(222)},3,undefined,7]
let b = deepClone(a);
console.log(a)
console.log(b)

Jquery的extend方法

$.extend([deep],target.object1,object2)，deep 为 boolean 值，true 为深拷贝，false 为浅拷贝，target.object1 为目标对象，object2 为需要拷贝的对象。

let a = [0,1,[2,3],4];
let b = $.extend(true,[],a);
a[0] = 1;
a[2][1] = 5;
console.log(a,b);

let c = [1,function(){alert(222)},3,undefined,7,null,8]
let d = $.extend(true,[],c);
console.log(c,d);

let e = {
	name: 'xxx',
	eat: function () {
		alert('吃饭了')
	},
	age: undefined,
	book: null,
 };
let f = $.extend(true,[],e);
console.log(e,f);

可以看出，效果与上面的方法一样，只是需要依赖 JQ 库；同时会把数组中的 undefined 变为空，把对象中的 undefined 忽略。