深拷贝和浅拷贝的对比

这两个都是针对对象的,比如说数组，不论是深拷贝还是浅拷贝,都是复制数组。那有什么不一样呢?

深拷贝

var a1=[1,2,3,4]

// 实现深拷贝
var a2=[...a1];
a1[0]=395
console.log(a2); //[1, 2, 3, 4]
console.log(a1); //[395, 2, 3, 4]

可以看出,深度拷贝出来的版本和原来的一份完全没有关系。改变原来的版本不会改变拷贝后的版本

浅拷贝

var a1=[1,2,3,4]
// 实现浅拷贝
var a2=a1;
a1[0]=395
console.log(a2); //[395, 2, 3, 4]
console.log(a1); //[395, 2, 3, 4]

可以看出,实现浅拷贝,a1和a2其实用的是同一份array.

原理

深拷贝就是在堆里面复制了一份对象,这份被复制出来的对象和原来的对象没关系,浅拷贝就是直接把对象的指针赋值给另一个变量,另一个变量指向的还是原理的对象。 浅拷贝看下图

深拷贝看下图

看图发现区别就懂了。

怎么实现深拷贝

递归

//1 递归
	function deepClone(obj){
		let objClone = Array.isArray(obj)?[]:{};
	            if(obj  && typeof obj==='object'){
				for(key in obj){
					if(obj.hasOwnProperty(key)){
						//子类是不是对象，是的话要递归
						if(obj[key] && typeof obj[key]=='object'){
				objClone[key]=deepClone(obj[key])
						}else{
							 //如果不是，简单复制
							objClone[key] = obj[key];
						}
					}
				}
			}
			return objClone;
	}
	
	var a1=[1,2,3];
	var a2=deepClone(a1);
	a1[0]=3858;
	console.log(a2);

JSON.stringify 和 JSON.parse

function deepClone2(obj){
		let _obj = JSON.stringify(obj),
		objClone = JSON.parse(_obj);
		return objClone
	}   
	
	var a1=[1,2,3];
	var a2=deepClone2(a1);
	a1[0]=3858;
	console.log(a2);

es6

var a1={age:1}
	var a2={...a1};
	a1.age=38;
	console.log(a2);

什么时候用

就是在有时候需要复制一个对象的时候，或者缓存一个对象的时候使用。