• 浅拷贝和深拷贝


    一、编写框架或者库时,为什么不用原生拷贝方法实现对象拷贝?
    1、Object.assign, Object.create, Object.clone,性能低下;
    2、Object.assign在IE系列浏览器全军覆没,兼容性不好;
    3、对于已经执行了Object.freeze的对象,Object.create拷贝无效;
    4、Object.clone在Chrome中完全不支持,兼容性不好。

    二、浅拷贝
    只能拷贝第一层为基本类型的引用类型数据,对于第一层值为引用类型的数据,只会拷贝引用地址。两个拷贝对象共用同一个引用类型,会相互影响。

    1、小技巧
    假如有这样一个数组,let arr = [1,'a',true,null,undefined];

    //A、slice()方法
    let sc = arr.slice();  //复制了引用,看起来像深拷贝
    //B、concat()方法
    let cc = arr.concat();  //复制了引用,看起来像深拷贝
    //C、from()方法
    let fc = Array.from(arr);
    //D、push()方法
    let pc = [];
    Array.prototype.push.apply(pc,arr);
    //E、map()方法
    let mc = arr.map(function(item){
      return item;
    });

    2、对象或数组的浅拷贝

    function shallowCopy(parent, child){
      var i, nobj = child || {};
      for(i in parent){
        parent.hasOwnProperty(i) && (nobj[i] = parent[i]);
      }
      return nobj;
    }
    var obj1 = {
      a: 1,
      b: { f: { g: 1 } },
      c: [ 1, 2, 3 ]
    };
    var obj2 = shallowCopy(obj1);
    console.log(obj2.b.f === obj1.b.f);   //true

    3、Object.assign()
    把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

    var obj1 = {
      a: 1,
      b: { f: { g: 1 } },
      c: [ 1, 2, 3 ]
    };
    var obj2 = Object.assign({}, obj1);
    console.log(obj2.b.f === obj1.b.f);   //true

    三、深拷贝
    可以拷贝引用类型数据,比如数组,对象。实现原理是,递归调用"浅拷贝"。两个拷贝对象共用同一个引用类型,互不影响。

    1、JSON的方式浅层次序列化对象

    假如有这样一个数组,let arr = [1,2,true,3,'a'];
    let jsonc = JSON.parse(JSON.stringify(arr));

    “浅层次”意味着正则表达式类型、函数类型等无法进行深拷贝。

    2、对象或数组的深拷贝

    function deepCopy(parent, child){
      var i, nobj = child || {};
      for(i in parent){
        if(parent.hasOwnProperty(i)){
          if(typeof parent[i]==='object'){
            nobj[i] = Array.isArray(parent[i]) ? []:{};
            deepCopy(parent[i], nobj[i]);
          }else{
            nobj[i] = parent[i];
          }
        }
      }
      return nobj;
    }
    var obj1 = {
      a: 1,
      b: { f: { g: 1 } },
      c: [ 1, 2, 3 ],
      d: function(value){
        this.e = value;
      }
    };
    var obj2 = deepCopy(obj1);
    console.log(obj2.b.f === obj1.b.f);     // false
    console.log(obj2);
  • 相关阅读:
    MySQL常用命令
    Jstack、Jmap命令简单使用
    MySQL慢查询日志ES索引模板
    MySQL二进制安装部署
    varnish启动报错
    基础训练 Sine之舞
    基础训练 FJ的字符串
    基础训练 芯片测试
    基础训练 龟兔赛跑预测
    基础训练 回形取数
  • 原文地址:https://www.cnblogs.com/camille666/p/shallowcopy_deepcopy.html
Copyright © 2020-2023  润新知