浅克隆
浅拷贝是指一个对象中某些是传入具体的值,但一些却又是传入的地址
利用展开运算符进行浅拷贝
const obj1 = {
name:"abc",
age:20,
address:{
province:"sichuan",
}
}
const obj2 = {...obj1}
利用assign混入进行浅拷贝
const obj1 = {
name:"abc",
age:20,
address:{
province:"sichuan",
}
}
const obj2 = Object.assign({},obj1);
原生实现浅拷贝函数
function clone(obj){
if(Array.isArray(obj)){
return obj.slice();
}else if(typeof obj === "object"){
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){
if(Array.isArray(obj)){
const newArr = [];
for(let i = 0; i < obj.length; i++){
newArray.push(clone(obj[i]));
}
return newArr;
}else if(typeof obj === "object"){
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");
const cloneDiv1 = div.cloneNode();
const cloneDiv2 = div.cloneNode(true);