JS——深拷贝

前言：

简单数据类型，存储在栈空间中，存储的是一个值；
如果是复杂数据类型，存储在堆空间中，栈中存储的是其引用。正是这种存储方式的差异，导致了浅拷贝和深拷贝的区别。

浅拷贝：
如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以修改新拷贝的对象会影响原对象。
深拷贝：
将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

常用实现深拷贝的方式
数组.concat() 只能实现第一层的深拷贝，深层的无法实现
Object.assign() 同上
JSON.parse(JSON.stringify()) 只支持object,array,string,number,true,false,null这几种数据,其他的比如函数，undefined，Date，RegExp等数据类型都不支持。对于它不支持的数据都会直接忽略该属性。

递归实现对象或数组深拷贝

var My={
    name:'123',
    age:22,
    hobby:['吃饭','睡觉','打游戏'],
    study:{
        js:{
            vue:'双向数据绑定',
            react:'组件化开发'
        },
        html:{
            h5:{div:'语义化标签',input:'增强型表单'}
        }
    }
}
let My2=My      //浅拷贝，复制的是地址
// My2.age=10   
// console.log(My);
// console.log(My2);

function deepClone(obj){
    //传入初始参数
    //如果不是对象或数组就返回，是null空对象也返回
    if((typeof obj)!='object'||obj==null){  
        return obj
    }
    //初始化返回结果
    let result;
    //判断是不是数组
    if(obj instanceof Array){
        result=[]
    }else if(obj instanceof Object){
        result={}
    }
    
    for (let key in obj){   //for in 遍历对象，遍历的是key
        //判断key不是原型上的属性 hasOwnProperty方法 如果属性在原型上会返回false
        if(obj.hasOwnProperty(key)){
            //递归函数 使用循环把每个参数传入然后重复调用 循环完毕函数执行完毕
            result[key]=deepClone(obj[key])
        }
    }

    //返回结果
    return result;

}
// console.log(deepClone(My));
//深拷贝 在内存中开辟了新的空间，复制的对象地址指向新的地址
My2=deepClone(My)
My2.age=12
console.log(My);
console.log(My2);

函数拷贝

function deepClone(target){
  if(target instanceof Object){
      let dist ;
      if(target instanceof Array){
        dist = []
      }else if(target instanceof Function){
        dist = function(){
            // 在函数中去执行原来的函数，确保返回的值相同
            return target.call(this, ...arguments);
        }
      }else{
        dist = {};
      }
      for(let key in target){
          dist[key] = deepClone(target[key]);
      }
      return dist;
  }else{
      return target;
  }
}

正则拷贝

function deepClone(target){
  if(target instanceof Object){
      let dist ;
      if(target instanceof Array){
        // 拷贝数组
        dist = [];
      }else if(target instanceof Function){
        // 拷贝函数
        dist = function () {
          return target.call(this, ...arguments);
        };
      }else if(target instanceof RegExp){
        // 拷贝正则表达式
       dist = new RegExp(target.source,target.flags);
      }else{
        // 拷贝普通对象
        dist = {};
      }
      for(let key in target){
          dist[key] = deepClone(target[key]);
      }
      return dist;
  }else{
      return target;
  }
}

拷贝日期

作者：海因斯坦
链接：https://zhuanlan.zhihu.com/p/270332499
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

function deepClone(target){
  if(target instanceof Object){
      let dist ;
      if(target instanceof Array){
        // 拷贝数组
        dist = [];
      }else if(target instanceof Function){
        // 拷贝函数
        dist = function () {
          return target.call(this, ...arguments);
        };
      }else if(target instanceof RegExp){
        // 拷贝正则表达式
       dist = new RegExp(target.source,target.flags);
      }else if(target instanceof Date){
          dist = new Date(target);
      }else{
        // 拷贝普通对象
        dist = {};
      }
      for(let key in target){
          dist[key] = deepClone(target[key]);
      }
      return dist;
  }else{
      return target;
  }
}

最终函数

function deepClone(target,cache = new Map()){
  if(cache.get(target)){
      return cache.get(target)
  }
  if(target instanceof Object){
      let dist ;
      if(target instanceof Array){
        // 拷贝数组
        dist = [];
      }else if(target instanceof Function){
        // 拷贝函数
        dist = function () {
          return target.call(this, ...arguments);
        };
      }else if(target instanceof RegExp){
        // 拷贝正则表达式
       dist = new RegExp(target.source,target.flags);
      }else if(target instanceof Date){
          dist = new Date(target);
      }else{
        // 拷贝普通对象
        dist = {};
      }
      // 将属性和拷贝后的值作为一个map
      cache.set(target, dist);
      for(let key in target){
          // 过滤掉原型身上的属性
        if (target.hasOwnProperty(key)) {
            dist[key] = deepClone(target[key], cache);
        }
      }
      return dist;
  }else{
      return target;
  }
}

本文代码作者：海因斯坦
链接：https://zhuanlan.zhihu.com/p/270332499
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。