js中的深复制与浅复制

Posted 2021-01-12 onlycare

在javascript中，浅复制与深复制主要是针对引用类型来说的，浅复制复制对象的引用，二者的变更会互相影响；深复制彻底复制整个对象，生成新的对象，二者独立存在，互不影响。

浅复制的实现途径有以下几种：

浅复制实现方式1：赋值。

var arr = [1, [2, 3], 4],arr1 = arr;
    arr[0] = 0;arr1[1][0] = ‘a‘;
    console.log(arr,arr1); // [0,[‘a‘,3],4] [0,[‘a‘,3],4]
    console.log(arr === arr1); // true

这种方法复制整个对象包括子对象的引用，无论对象是单层的还是多层，任意层级的元素变更都会相互影响。

以下三种浅复制方式不同于赋值，下面的3种方式都是赋值子级对象的引用，也就是说，如果被复制的对象是单层的，子级元素都是基本数据类型，那么就不存在浅复制了，表现等同深复制；当被复制对象非单层，那么会复制内层对象的引用，外层相互独立，内层会相互影响。

浅复制实现方式2：ES6中的Object.assign()方法

var arr = [1, [2, 3], 4],arr2 = Object.assign([], arr);
    arr[0] = 0;arr2[1][0] = ‘a‘;
    console.log(arr, arr2);    // [0,[‘a‘,3,4]] [1,[‘a‘,3,4]]
    console.log(arr === arr2);   // false

浅复制实现方式3：js数组的 slice() 和 concat() 方法

var arr = [1, [2, 3], 4],arr3 = arr.slice();
    arr[0] = 0;arr3[1][0] = ‘a‘;
    console.log(arr, arr3);    // [0,[‘a‘,3],4] [1,[‘a‘,3],4]
    console.log(arr === arr3);  // false

 var arr = [1, [2, 3], 4],arr4 = arr.concat();
    arr[0] = 0;arr4[1][0] = ‘a‘;
    console.log(arr, arr4);    // [0,[‘a‘,3],4] [1,[‘a‘,3],4]
    console.log(arr === arr4);  // false

浅复制实现方式4：Jquery的 $.extend([isDeep],target,object1,object2...)

var arr = [1, [2, 3], 4],arr8 = $.extend(false,[],arr);
    arr[0] = 0;arr8[1][0] = ‘a‘;
    console.log(arr, arr8);     // [0,[‘a‘,3],4] [1,[‘a‘,3],4]
    console.log(arr === arr8);  // false

深复制的实现途径有以下几种：

深复制实现方式1：递归拷贝

function deepClone1(obj){
        let objClone = Array.isArray(obj)?[]:{};
        if(obj && typeof obj==="object"){
            for(key in obj){
                if(obj.hasOwnProperty(key)){
                    //判断ojb子元素是否为对象，如果是，递归复制
                    if(obj[key]&&typeof obj[key] ==="object"){
                        objClone[key] = deepClone1(obj[key]);
                    }else{
                        //如果不是，简单复制
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }

    var arr = [1, [2, 3], 4],arr5 = deepClone1(arr);
    arr[0] = 0;arr5[1][0] = ‘a‘;
    console.log(arr, arr5);    // [0,[2,3],4] [1,[‘a‘,3],4]
    console.log(arr === arr5);  // false

深复制实现方式2：JSON.stringify() 和 JSON.parse() 方法

function deepClone2(obj){
        let _obj = JSON.stringify(obj),
            objClone = JSON.parse(_obj);
        return objClone
    }

    var arr = [1, [2, 3], 4],arr6 = deepClone2(arr);
    arr[0] = 0;arr6[1][0] = ‘a‘;
    console.log(arr, arr6);     // [0,[2,3],4] [1,[‘a‘,3],4]
    console.log(arr === arr6);  // false

深复制实现方式3：Jquery的 $.extend([isDeep],target,object1,object2...)

var arr = [1, [2, 3], 4],arr7 = $.extend(true,[],arr)
    arr[0] = 0;arr7[1][0] = ‘a‘;
    console.log(arr, arr7);     // [0,[2,3],4] [1,[‘a‘,3],4]
    console.log(arr === arr7);  // false