JS深度拷贝

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>

    //方法1 适用数组和对象 通过json对象的parse 和 stringily
    function deepClone(obj){
        let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
        return objClone
    }    
    var a=[0,1,[2,3],4],
    b=deepClone(a);
    a[0]=1;
    a[2][0]=1;
    console.log(a,b);

    //方法2 适用数组和对象 $.extend()
    var a=[0,1,[2,3],4],
    //c参数1 是否是深拷贝(true), 参数2,目标对消,参数3 ,要拷贝的对象
    b=$.extend(true,[],a);
    a[0]=1;
    a[2][0]=1;
    console.log(a,b);

    //方法3 但是 里面的二维数组依然占用同一内存
    var arr =[0,1,[2,3],4];
    var arr2 = arr.concat();
    arr2[0]=1;
    arr2[2][0] = 1;
    console.log(arr,arr2)

    // 方法4 同上 都属于浅拷贝,二层数据不能修改
    var arr3 = [...arr];//或者 var [...arr3] = arr;
    arr3[0]=1;
    arr3[2][0] = 1;
    console.log(arr,arr3)

    //方法5 同上 都属于浅拷贝,二层数据不能修改
    var obj = { a: {a: "hello", b: 'world'} };
    var obj2 = Object.assign({}, obj);
    obj2.a.a = "changed";
    console.log(obj.a.a); // "changed"

   //方法5 深拷贝
   function deepClone2(initalObj, finalObj) {    
       var obj = finalObj || {};    
       for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环,如initalObj.a = initalObj的情况
    if(prop === obj) {            
        continue;
    }        
    if (typeof prop === 'object') {
        obj[i] = (prop.constructor === Array) ? [] : {};            
        arguments.callee(prop, obj[i]);
    } else {
        obj[i] = prop;
    }
    }    
    return obj;
    }
    var str = {};
    var obj = { a: {a: "hello", b: 21} };
    deepClone2(obj, str);
    console.log(str.a);

    //方法6 深拷贝 Object.create()
    
    //方法7 深拷贝 lodash
    var _ = require('lodash');
    var obj1 = {
        a: 1,
        b: { f: { g: 1 } },
        c: [1, 2, 3]
    };
    var obj2 = _.cloneDeep(obj1);
    console.log(obj1.b.f === obj2.b.f);

</script>

 

posted @ 2018-09-06 11:24  梦蝶庄周  阅读(329)  评论(0编辑  收藏  举报