2018-01-06 关于javascript的深拷贝浅拷贝 思考

目录:

• 什么是复制?
• 一个简单的浅复制
• 一个深复制的例子
• 普遍的深浅复制的几种实现方法

• 深拷贝，浅拷贝

  • 什么是复制？

    • 简单变量的复制，内存小，我们直接复制不会发生引用。
    • 首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。

  • 下面是一个简单的浅复制

    • 浅复制只会将对象的属性依次复制，而不会进行递归，而 javascript 储存对象都是村地址的，浅复制就是将 obj.arr 和 shallowObj.arr 指向同一个内存地址

    var obj = { a:1, arr: [2,3] };
    var shallowObj = shallowCopy(obj);
    
    function shallowCopy(src) {
      var dst = {};
      for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
          dst[prop] = src[prop];
        }
      }
      return dst;
    }
    

    

    image
    • 当我们测试的时候就会发现这样的结果

    shallowObj.arr[1] = 5;
    obj.arr[1]   // = 5
    

  • 下面是一个深复制的例子

    • 深复制的原理上面提到了，我们直接来看代码。

    var obj = { a:1, arr: [1,2] };
    var obj2 = deepCopy(obj);
    
    

    

    image

  • 下面来讨论普遍的深浅复制的几种实现方法

    • ES6 使用两种复制方法不会发生引用

      • array2 = Array.form(array1)
      • array2 = [...array1];

    • 基本的 js 数组和 json 复制

      • array2 = array1.slice(0)
      • array2 = array1.concat()

      //循环复制
      for(var i = 0;i < arr1.length; i++){
          arr2[i] = arr1[i];
      }
      
      //json数据
      for(var name in json1){
          json2[name] = json1[name];
      }
      

    • 浅复制的几种方法

      var json1 = {"a":"panda","arr1":[1,2,3]}
      function copy(obj1) {
      　　　　var obj2 = {};
      　　　　for (var i in obj1) {
      　　　　　　obj2[i] = obj1[i];
      　　　　}
      　　　　return obj2;
      }
      var json2 = copy(json1);
      json1.arr1.push(4);
      alert(json1.arr1);  //1234
      alert(json2.arr1)  //1234
      

    • 深复制的几种方法

      
      //简单粗暴的深复制
      //劣势:无法复制函数
      //原型链没了，对象就是object，所属的类没了。
      function jsonClone(obj) {
          return JSON.parse(JSON.stringify(obj));
      }
      var clone = jsonClone({ a:1 });
      ---------------
      var json1={"name":"panda","age":18,"arr1":[1,2,3,4,5],"string":'afasfsafa',"arr2":[1,2,3,4,5],"arr3":[{"name1":"panda"},{"job":"前端开发"}]};
      var json2={};
      
      function copy(obj1,obj2){
        var obj2=obj2||{}; //最初的时候给它一个初始值=它自己或者是一个json
        for(var name in obj1){
          if(typeof obj1[name] === "object"){ //先判断一下obj[name]是不是一个对象
            obj2[name]= (obj1[name].constructor===Array)?[]:{}; //我们让要复制的对象的name项=数组或者是json
            copy(obj1[name],obj2[name]); //然后来无限调用函数自己 递归思想
          }else{
            obj2[name]=obj1[name];  //如果不是对象，直接等于即可，不会发生引用。
          }
        }
        return obj2; //然后在把复制好的对象给return出去
      }
      json2=copy(json1,json2)
      json1.arr1.push(6);
      alert(json1.arr1);  //123456
      alert(json2.arr1);  //12345
      
      

参考了:

深入剖析 JavaScript 的深复制

js中对象的复制，浅复制（浅拷贝）和深复制（深拷贝）

你不知道的 javascript (上)