深浅拷贝的应用理解

深浅拷贝的应用理解

浅拷贝

主要是针对于引用数据类型
就是对引用数据类型的地址进行引用 复制后的副本，和原来父本。两者如果互相修改内容的会影响

浅拷贝方式：

1. 简单赋值
2. 简单遍历
3. 扩展运算符
4. assign

简单赋值：

let obj = {
    name:'小明',
    age:99,
    arr:[10,20,90],
    o:{
        name:'小王'
    }
}
//简单赋值
let otherObj = obj
obj.age = 66
console.log('obj',obj); //age:66
console.log('other',otherObj); //age:66

简单遍历：

//简单遍历
let otherObj = {}
for(var key in obj){
    otherObj[key] = obj[key]
}
obj.age = 30
obj.o.name = '小李'
obj.arr[0] = 80
console.log('obj',obj); //obj.o.name:'小李',obj.arr[0]:80
console.log('other',otherObj); //obj.o.name:'小李',obj.arr[0]:80

扩展运算符：

//扩展运算符
let otherObj = {...obj}
obj.age = 30
obj.o.name = '小李'
obj.arr[0] = 80
console.log('obj',obj); //obj.o.name:'小李',obj.arr[0]:80
console.log('other',otherObj); //obj.o.name:'小李',obj.arr[0]:80

assign:

//assign
let otherObj = Object.assign(obj) 
obj.age = 88
console.log('obj',obj); //88
console.log('other',otherObj); //88

深拷贝

单独的开辟空间去另外地方进行存储 ，拷贝后复制后的副本和原来父本完全不会影响

深拷贝方法：

1. JSON反序列化

缺点：如果json里有 function,undefined，则序列化的结果会把 function,undefined 丢失

2. 递归深度遍历
3. lodash插件

JSON反序列化

// json反序列化
let obj = {
    name:'小明',
    age:22,
    arr:[10,20,40],
    a:undefined,
    b:function(){},
    p:{
        name:'小李',
        o:{
            name:'小强',
            j:{
                name:'小文'
            }
        }
    }
}
function cloneDeep(obj){
    return JSON.parse(JSON.stringify(obj))
}
let s1 = cloneDeep(obj)
s1.age = 99 
s1.arr[0] = 90 
obj.p.o.j.name = 'aaaaa'
console.log('obj',obj);
console.log('cloneobj',s1);

递归深度遍历

//递归进行深度遍历
function cloneDeep(origin){
    let cloneObj = Array.isArray(origin) ? [] : {}
    if(cloneObj && typeof origin == 'object'){
        for(var key in origin){
            if(origin[key] && typeof origin[key] == 'object'){
                 cloneObj[key] = cloneDeep(origin[key])
            }else{
                cloneObj[key] = origin[key]
            }
        }
    }
    return cloneObj
}
let s1 = cloneDeep(obj)
s1.name = 'aaa'
s1.arr[0] = 1111
console.log('origin',obj);
console.log('clone',s1);

lodash插件

//lodash
let s1 = _.cloneDeep(obj)