美文网首页
JavaScript数组(对象)的深拷贝和浅拷贝

JavaScript数组(对象)的深拷贝和浅拷贝

作者: celineWong7 | 来源:发表于2018-11-05 15:55 被阅读0次

    我们时常需要对某个变量进行复制,如果直接用赋值符号 a=b ,对于普通的数值、字符串来说,改变a或者b,都不会影响另外一个;但如果是数组或者对象,你会发现a和b是相关联的,也就是说改动其中一个,另外一个也会跟着改变。
    这也就涉及到浅拷贝和深拷贝了。本篇主要说明数组和对象的深拷贝方式,不考虑函数类型。

    1 JavaSCript 数据类型

    在JavaSCript中的数据类型中,分为两种:原始类型(number/string/boolean/null/undefined)和引用类型(array/object/function)。

    1.1 原始类型

    简单的值复制,变量分别有自己的内存空间,互相不会影响:

    var a = 100;
    var b = a;
    a = 102;
    console.log(a); // 102
    console.log(b); // 100
    

    1.2 引用类型

    引用类型:复制的是内存地址,相当于ary1和ary2指向同一片内存区域,改变ary1也会改变ary2. ——所谓的浅拷贝

    var ary1 = [1,2,3,4];
    var ary2 = ary1;
    ary1.push(66);
    console.log(ary1); // [1,2,3,4,66]
    console.log(ary2); // [1,2,3,4,66]
    

    2 如何实现深拷贝

    2.1 巧用slice() 和 concat()

    这两种方法,只能实现一维数组的深拷贝(多维数组无效)。
    arrayObj.slice(start,[end]) 截取数组,返回截取后的新数组

    var ary3 = [1,2,3];
    var ary4 = ary3.slice(0);
    ary3[0] = 99;
    console.log(ary3); // [99, 2, 3]
    console.log(ary4); // [1, 2, 3]
    

    arrayObject.concat(arrayX,arrayX,......,arrayX) 连接多个数组,返回一个新数组

    var ary5 = [88,99];
    var ary6 = ary5.concat();
    ary5.pop();
    console.log(ary5); // [88]
    console.log(ary6); // [88,99]
    

    2.2 for循环遍历

    这个方式很好理解,就是一一赋值。多维数组的深拷贝也可以用嵌套for循环实现。

    var ary7 = [1,2,3,4];
    var ary8 = [];
    for(var i=0;i<ary7.length;i++){
        ary8[i] = ary7[i]
    }
    ary7.push(100);
    console.log(ary7); // [1, 2, 3, 4, 100]
    console.log(ary8); // [1, 2, 3, 4]
    

    2.3 JSON.stringify()/JSON.parse()

    这种方式相当于是把原数组转成字符串类型,之后再解析。
    这种方法的缺陷在于:无法复制函数;丢失原型链(对象就丢失所属的类)。

    var ary9 = [1,2,3];
    var ary10 = JSON.parse(JSON.stringify(ary9));
    ary9.push(100);
    console.log(ary9); // [1, 2, 3, 100]
    console.log(ary10); // [1, 2, 3]
    

    JSON转串的方式,对于多维数组也有效:

    var ary99 = [1,2,3,['a','b']];
    var ary100 = JSON.parse(JSON.stringify(ary99));
    ary99.push(100);
    console.log(ary99); // [1, 2, 3,['a','b'], 100]
    console.log(ary100); // [1, 2, 3,,['a','b']]
    

    2.4 jQuery方式

    $.extend([deep], target, object1 [, objectN ]) 该方法可以运用于数组,也可以运用于对象。

    var ary11 = [1,2,3];
    var ary12=[];
    $.extend(true,ary12,ary11);
    // var ary12 = $.extend(true,[],ary11); // 作用同上面两个
    ary11.push(99);
    console.log(ary11);
    console.log(ary12);
    

    2.5 递归方法

    使用递归函数实现多维数组 or 对象的深度拷贝。

    function deepCopy(obj) {
      var out = (obj.constructor === Array) ? [] : {};
      for (var i in obj) {
        if (typeof obj[i] === 'object') {
          out[i] = (obj[i].constructor === Array) ? [] : {};
          out[i] = deepCopy(obj[i]);
        } else {
           out[i] = obj[i];
        }
      }
      return out;
    }
    
    var obj = {
        name:'celine',
        age:'22',
        address:{
            country: 'China',
            province:'Fujian',
            city:'Amoy'
        }
    }
    var obj2 = deepCopy(obj);
    obj.name = 'Wang Xiaolin';
    obj.address.city = 'Quanzhou';
    console.log(obj);
    console.log(obj2);
    

    参考:
    数组和对象的浅拷贝和深拷贝
    JavaScript深拷贝和浅拷贝数组

    相关文章

      网友评论

          本文标题:JavaScript数组(对象)的深拷贝和浅拷贝

          本文链接:https://www.haomeiwen.com/subject/xupsxqtx.html