美文网首页
js 深拷贝与浅拷贝

js 深拷贝与浅拷贝

作者: 一只章鱼哥 | 来源:发表于2021-01-11 17:16 被阅读0次

    浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

    1.浅拷贝的实现方法

    1、简单地复制语句

    2、Object.assign()

    Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign() 进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

    3.JavaScript 中数组和对象自带的拷贝方法都是“首层浅拷贝”

    比如:

    (1)concat 数组的拼接

    (2)slice 数组的分割

    (3)...展开运算符(... 实现的是对象第一层的深拷贝。后面的只是拷贝的引用值。)

    2.深拷贝的实现方法

    (1)采用递归去拷贝所有层级属性

    function deepClone(obj){
        let objClone = Array.isArray(obj)?[]:{};
        if(obj && typeof obj==="object"){
            for(key in obj){
                if(obj.hasOwnProperty(key)){
                    //判断ojb子元素是否为对象,如果是,递归复制
                    if(obj[key]&&typeof obj[key] ==="object"){
                        objClone[key] = deepClone(obj[key]);
                    }else{
                        //如果不是,简单复制
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }   
    let a=[1,2,3,4],
        b=deepClone(a);
    a[0]=2;
    console.log(a,b);
      function deepClone(data){
          var type = getType(data);
          var obj;
          if(type === 'array'){
              obj = [];
          } else if(type === 'object'){
              obj = {};
          } else {
              //不再具有下一层次
              return data;
          }
          if(type === 'array'){
              for(var i = 0, len = data.length; i < len; i++){
                  obj.push(deepClone(data[i]));
              }
          } else if(type === 'object'){
              for(var key in data){
                  obj[key] = deepClone(data[key]);
              }
          }
          return obj;
      }

    (2) 通过JSON对象来实现深拷贝

    function deepClone2(obj) {
      var _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
      return objClone;
    }

    不过这种方法无法实现对对象中方法的深拷贝,会显示为undefined

    相关文章

      网友评论

          本文标题:js 深拷贝与浅拷贝

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