zoukankan      html  css  js  c++  java
  • JS: 对象深拷贝

    浅拷贝:只拷贝数组或者对象的引用,无论在新的或者旧的数组或者对象中作了修改,两者都会发生变化,即两个指向的地址是同一块。

    深拷贝:这种拷贝使两者分离,修改一个对象的属性,另外一个也不会有影响,即深拷贝会把所有东西重新复制一份放在另一个地方,两者指向的不是同一块地址。

    1. JSON.stringify() &JSON.parse()

    将JSON.stringify对象转换成字符串,然后通过JSON.parse将字符串转换成对象

    var obj = {a:1, b:2, c:3};
    var obj2 = JSON.parse(JSON.stringify(obj));
    obj2.a = 2;
    console.log(obj.a);
    console.log(obj2.a);

    上面的结果输出分别是:1和2

    说明obj 和 obj2之间没有关系了,实现深拷贝

    缺点:只能用于对象属性的深拷贝不能用于对象方法的拷贝

    var arr = [function(){
        console.log(a)
    }, {
        b: function(){
            console.log(b)
        }
    }]
    
    var new_arr = JSON.parse(JSON.stringify(arr));
    
    console.log(new_arr);
    

     输出结果:

    2. Object.assign(),可以实现对象属性和方法的深拷贝

    实现对象属性的深拷贝

    const object1 = {
      a: 1,
      b: 2,
      c: 3
    };
    
    const object2 = Object.assign({}, object1);
    
    object2.a = 2;
    
    console.log(object1);
    console.log(object2);

    实现对象方法的深拷贝

    const object1 = {
      a: 1,
      b: 2,
      c: function() {console.log('hello')}
    };
    
    const object2 = Object.assign({}, object1);
    
    object2.c = function() {
      console.log('test');
    }
    
    console.log(object1.c());
    console.log(object2.c());

    输出结果分别是:'hello'和'test'

    以上两个方法都可以实现对象深拷贝,但是各自的使用是有限制的,可以根据需求使用。

    3. 用js方法实现深拷贝

    function deepClone(source, target) {
      var target = target || {},
          toStr = Object.prototype.toString, //
          arrType = '[object Array]';
      for(key in source) {
        if(typeof(source[key]) === 'object' && source[key] !== null) {
          if(toStr.call(source[key]) === arrType) { //判断一个对象是否是数组
            target[key] = [];
          } else {
            target[key] = {};
          }
    
          deepClone(source[key], target[key]); //对象或者数组中还有数组则用递归调用
        } else {
          target[key] = source[key];
        }
      }
    
      return target;
    }
    
    
    var sour = {
      a: '1',
      b: {
        aa: 1,
        bb: [1, 2],
        cc: {
          xx: 1,
          yy: [{a: 1}]
        }
      }
    };
    
    var tar = deepClone(sour);
    tar.b.cc.xx = 2;
    tar.b.cc.yy.push({b:2});
    console.log(tar);
    console.log(sour);
  • 相关阅读:
    浏览器的reflow和repaint
    javascript正则表达式中参数g的作用
    InkCanvas 自由虚线笔画
    WPF 圆轮菜单的实现
    WPF实现化学式上下标
    install and use zookeeper C client API
    install and use boost::thread
    explicit instantiations in template class/function
    The science of programming
    how does vector work?
  • 原文地址:https://www.cnblogs.com/ycherry/p/9851627.html
Copyright © 2011-2022 走看看