深克隆和浅克隆的定义
浅克隆定义:
直接将存储在栈中的值赋值给对应变量,如果是基本数据类型,则直接赋值对应的值,如果是引用类型,则赋值的是地址。
浅克隆代码:
function lowClone(Clone){
let obj={};
for(let key in Clone){
obj[key]=Clone[key]
}
return obj;
}
let a = {
name: "jack",
class:[1,2,3],
love:{
eat:"delicious food!",
drink:"milk"
}
}
let res=lowClone(a)
展示结果:
小结:可以发现使用浅克隆,如果修改的是引用类型,则原来的对象也会修改,若修改的基本数据类型则不会影响。
深克隆定义:
把数据赋值给对应的变量,从而产生一个与源数据不相干的新数据(数据地址已变化)。深克隆是克隆对象各个层级的属性。
深克隆代码(递归思想):
function deepClone(clone){
if(typeof clone !== 'object' || clone===null){
return clone;
}else if(Object.prototype.toString.call(clone)=='[object Array]'){
let _arr=[];
clone.map((ele)=>{
_arr.push(ele);
})
return _arr;
}else{
let _obj={};
for(let key in clone){
_obj[key]=deepClone(clone[key])
}
return _obj;
}
}
let a = {
name: "jack",
class:[1,2,3],
love:{
eat:"delicious food!",
drink:"milk"
}
}
let b=deepClone(a);
console.log(a === b);
展示结果:
小结:可以发现使用深克隆,如果修改的是引用类型,则原来的对象不会修改,此时新的对象地址已经变化,不再会受影响。
注意:如果obj里有RegExp、Error对象,还需做其他的处理。
另外一种方式可以简单粗暴实现深克隆
var b = JSON.parse(JSON.stringify(a));
使用上述方法时需要注意几点:
1、如果obj里面有时间对象,则JSON.stringify后再JSON.parse的结果,时间将只是字符串的形式。而不是时间对象
2、如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象;
3、如果obj里有函数,undefined,则序列化的结果会把函数或 undefined丢失;
4、如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null
5、JSON.stringify()只能序列化对象的可枚举的自有属性,例如如果obj中的对象是有构造函数生成的,则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor;
6、如果对象中存在循环引用的情况也无法正确实现深拷贝;