浅拷贝:只是复制指向某个对象的指针,而不复制对象本身新旧对象,它们还是共享同一内存。
深拷贝:会另选创造一个一模一样的对象,新对象和原对象不共享内存,修改新对象不会改到原对象。也就是老死不相往来了。
知道了深浅拷贝的含义,那就来总结如何实现深浅拷贝。
let data={
name:'ddd',
type:'es',
impl:[
{
e:1,a:2
},
{
e:2,
a:3
}
]
}
//第一种情况:
let obj=data; //浅拷贝
obj.name='aa' //修改name的值 data的name值也发生改变
console.log(obj,data);
//第二种情况:
let obj1={data}; //定义obj1是一个对象,并且将data是obj1的子对象。
obj1.name='bb' //给obj1添加name属性,data的name值不发生改变
obj1.data.impl[0].e=4;
obj1.data.name='pp';
console.log(obj1,data);
//第三种情况:
let obj2={...data}; //对象obj2拷贝data的值,如果属性第一层不是对象则是深拷贝。
obj2.name='cc';
obj2.impl[0].e=3
console.log(obj2,data);
以上的代码是我无聊的时候瞎写的代码,但是我发现打印出来的值都是不一样的。有些知识点还是值得去总结的。
浅拷贝:
如上第一种情况就是一个浅拷贝的过程,obj和data共用一个内存地址,所以谁变谁都会变,这样很危险哦。
第二种情况虽然data是obj1的子对象,但是子对象和父对象也是浅拷贝的关系。
第三种情况也是浅复制,只能解决对象一层属性的所有复制。即属性不是对象,则修改它变成一个新的值则原对象不会发生改变。
对于第三种这个情况:有时候是深拷贝,有时候是浅拷贝 这样的语法在js很常见。只有当属性值不是对象的时候则是深拷贝否则就是浅拷贝:
1、for in 遍历循环拷贝;
2、es6 Object.assign({ },obj);
3、{… obj};
4、concat;
5、slice
那么如何才能实现真正的拷贝呢?也就是真的老死不相往来了,一点关系也没有了呢?
1、利用JSON对象的parse和stringfy
JSON.stringfy是将一个js对象值转成一个JSON字符串;JSON.parse是将一个JSON字符串转成一个js对象。先转成字符串再转对象,所生成的对象和原来的对象不共用同一内存,实现深拷贝的过程。但是有个问题:undefined、function、symbol在转化中会被忽略。
2、利用递归函数来实现
function deepClone(source){
const targetObj =source.constructor===Array?[]:{};
for(let keys in source){
if(source.hasOwnProperty(keys)){ //判断是否是非继承属性
if(source[keys] && typeof source[keys]==='object'){
targetObj[keys]=source[keys].constructor ===Array?[]:{};
targetObj[keys]=deepClone(source[keys])
}else{
targetObj[keys]=source[keys]
}
}
}
return targetObj;
}
3、loadsh第三方库来实现 _.cloneDeep
var obj={
a:{
b:2,
c:3
}
}
var obj1=_.cloneDeep(obj);
obj1.a.c=6;
console.log(obj1,obj);