JS进阶之深浅拷贝

深浅拷贝

• 深拷贝：改变不会使原数据跟着改变
• 浅拷贝：改变后会使原数据跟着改变
• 半深拷贝：嵌套对象中，第一层是深拷贝，第二层及以上为浅拷贝
  （我们要尽量避免浅拷贝，多使用深拷贝）

半深拷贝的三种方法

• 数组 concat() slice()

    var arr = ['a','b'];
    var arr2 = arr.concat();
    arr2.push('c');
    console.log(arr2);//[a,b,c]
    console.log(arr);//[a,b]

• new Object(); 新建一个对象，一个个将属性复制过去

    var a = {id:1,name:'a',obj:{id:999}};
    var b = new Object();
    b.name = a.name;
    b.id = a.id;
    b.obj = a.obj;
    a.name='aaaaaa';
    a.obj.id = 5000;
    console.log(b);//{name: "a", id: 1, obj: {id:5000}}
    console.log(a);//{name: "aaaaaa", id: 1, obj: {id:5000}}

• Object.assign(a，b) 将对象b加到对象a中

    var o1 = {o:1};
    var o2 = {r:2};
    Object.assign(o1,o2); //{o:1,r:2}
    var a = {id:1,name:'a',obj:{id:999}};
    function fun(obj){
        var o = {};
        Object.assign(o,obj);
        return o;
    }
    var a2 = fun(a); //复制的新值
    a2.name='a2';
    a2.obj.id = 888;
    console.log(a) //{id:1,name:'a',obj:{id:888}}
    console.log(a2){id:1,name:'a2',obj:{id:888}}

深拷贝的两种方法

• JSON.parse(JSON.stringify(obj)) 深拷贝 但不支持function

    var obj = {
        name: 'sonia',
        age: 18,
        obj:{id:222},
        action:function(){
            console.log(this.name);
        }
    }
    var obj2 = JSON.parse(JSON.stringify(obj));
    
    obj.name = 'alice';
    obj.obj.id = 333;
    console.log(obj) //{name: 'alice',age: 18,obj:{id:333},action:function(){}}
    console.log(obj2) //{name: 'sonia',age: 18,obj:{id:222}} 没有把函数复制过去

• 封装一个递归函数

    var Animal={
        name: "duobi",
        skin: ["red", "green"],
        child: {
            xxx: "xxx",
            obj:{
                id:1
            }
        },
        say: function(){
            console.log("I am ", this.name, " skin:", this.skin)
        }
    }
    function deep(dest, obj){   //形参 dest  ==== {}  obj==== Animal
        var o = dest;
        for (var key in obj) {   //key == 'name'  'skin'  'child' ; value = obj[key]
            if (typeof obj[key] === 'object'){   //判断是不是对象(数组或对象)
                o[key] = (obj[key].constructor===Array)?[]:{}; // obj[key].constructor判断类型 更精准判断object array
                deep(o[key], obj[key])  //递归
            } else {
                o[key] = obj[key]    // {name: "duobi",skin:[],child:{}}
            }
        }
        return o;
    };

    var x = deep({},Animal); //实参
    var y = deep({},Animal);