深拷贝与浅拷贝

浅克隆

浅拷贝是指一个对象中某些是传入具体的值，但一些却又是传入的地址

利用展开运算符进行浅拷贝

const obj1 = {
	name:"abc",
	age:20,
	address:{
		province:"sichuan",
	}
}
const obj2 = {...obj1}
// 此时obj1不等于obj2，因为obj1其实是新new的一个对象
// 但是obj1.address等于obj2.address，他们的address都是共用一个地址的，所以是浅拷贝

利用assign混入进行浅拷贝

const obj1 = {
	name:"abc",
	age:20,
	address:{
		province:"sichuan",
	}
}
const obj2 = Object.assign({},obj1);

原生实现浅拷贝函数

function clone(obj){
	//判断obj的类型
	if(Array.isArray(obj)){
		//obj是数组类型
		return obj.slice();
	}else if(typeof obj === "object"){
		//obj是对象
		const newObj = {};
		for(let prop in obj){
			newObj[prop] = obj[prop];
		}
		return newObj;
	}else{
		//原始类型
		return obj;
	}
}

深克隆

相当于所有的对象都是重新开辟的空间，每一个引用地址都是开辟了新的空间以后传入的具体的值

利用json转换来实现深拷贝

const obj1 = {
	name:"abc",
	age:20,
	address:{
		province:"sichuan",
	}
}
const obj2 = JSON.parse(JSON.stringify(obj1));

原生实现深拷贝函数（递归实现）

function clone(obj){
	//判断obj的类型
	if(Array.isArray(obj)){
		//obj是数组
		const newArr = [];
		for(let i = 0; i < obj.length; i++){
			newArray.push(clone(obj[i]));
		}
		return newArr;
	}else if(typeof obj === "object"){
		//obj是对象
		const newObj = {};
		for(let prop in obj){
			newObj[prop] = clone(obj[prop]);
		}
		return newObj;
	}else{
		//函数,原始类型直接返回
		return obj;
	}
}

dom元素的深浅克隆

利用cloneNode这个api来实现对dom元素的克隆

<div id="dom">123</div>

const div = document.getElementById("dom");
//cloneNode未传参的时候表示浅克隆，此时不会克隆div的内容部分
const cloneDiv1 = div.cloneNode();

//传入参数true表示深克隆，这时会把div的内容123也克隆进去
const cloneDiv2 = div.cloneNode(true);