关于js浅拷贝深拷贝的思考

时间:2022-05-05 19:56:09

最近做需求又遇到深拷贝浅拷贝的问题,就整理了下,加深下印象。

 列举几个常用的场景

1.a为基本数据类型  (基本数据类型按值访问)

    var  a = 1;

    var  b = a;

    a =2;

   console.log(b); //1


 2.a为对象,或数组 (引用数据类型复制的是内存地址)

     var a = {"id":1,"age":10}

     var b = a;

     a.id=2;

     console.log(b.a);  //2

------------------------------------------

    var a =[2,3]

    var b=a;

    a[0] = 4;

    console.log(b[0]);  //4


所以一般的深拷贝浅拷贝是针对引用类型的数据进行分析的。

实现浅拷贝的常用方法:

  Object.assign();

  $.extend(false,a,b); //jquery

 

实现深拷贝的常用方法:

  $.extend(true,a,b); //jquery

  angular.copy()  //angular

  JSON.stringify();


浅拷贝存在的问题只能拷贝一层 。

     关于这点,我之前有过错误的想法。认为浅拷贝和“=”的用法一样。后来无意间看到上述的描述,就明白了。上代码:

      “=”的用法                                                                     

     var a = {"id":1,"age":10} ;                                                  

      var b = a;                                                                     

      a.id=2;                                                                            

      console.log(b.id);//2    被改变了                                   

                                                                                            

  浅拷贝的用法(第一层的子属性是引用类型) 

        var a = {"id":1,"info":{"age":24,"name":"zyw"}} ;

        var b = $.extend({},a);  

        a.id=2;     

        a.info.age = 18;

        console.log(b.id);//   没有被改变

        console.log(b.info.age);//18    被改变了



预备知识点:

   js基本数据类型:Undefined    Null    String   Boolean  Number  

   js引用数据类型 : Object ,比如:Object  Array  Function 等


预留知识点,下次有空整理下

1.手动实现深拷贝,浅拷贝

2.$.extend() 源码解析


希望我的整理对疑惑的你也有作用,也希望更优秀的你,给我不一样的见解,指出我的误点。