JS深拷贝函数 (开箱即用)

本文会讲到几种深拷贝的方法,

1.递归拷贝

这种方式 适用于多层数据嵌套

export function deepClone(obj){  //可传入对象 或 数组
 //  判断是否为 null 或 undefined 直接返回该值即可,
 if(obj === null || !obj)return obj; 
 // 判断 是要深拷贝 对象 还是 数组
 if(Object.prototype.toString.call(obj)==="[object Object]"){ //对象字符串化的值会为 "[object Object]"
   let target = {}; //生成新的一个对象
   const keys =  Object.keys(obj); //取出对象所有的key属性 返回数组 keys = [ ]
   //遍历复制值, 可用 for 循环代替性能较好
   keys.forEach(key=>{
     if(obj[key]&&typeof obj[key] === "object")
        //如果遇到的值又是 引用类型的 [ ] {} ,得继续深拷贝
       target[key] = deepClone(obj[key]);//递归
     else
       target[key] = obj[key];
     
   })
   return target  //返回新的对象
 }else if(Array.isArray(obj)){
   // 数组同理
   let arr = [];
   obj.forEach((item,index)=>{
     if(item&&typeof item === "object")
       arr[index] = deepClone(item);
     else
        arr[index] = item;
   })
   return arr
 }  
}

用法
const  obj = {};
const  obj2 = deepClone(obj);

总结:

  该方法比较好,对于一些复杂嵌套的数据类型可以完全深拷贝

.

2. JSON.stringify()

   const source = { name:'小明' ,sayName:()=>{} ,prop:undefined};
   const  newObj   = JSON.stringify( source )
  //先字符串序列化 再 parse解析回来
   console.log(JSON.parse(  newObj   ))
   VM575:1      {"name":"小明"}// 输出结果

总结:

  该方法简单,但是会吧引用类型和undefined的属性去除,相比第一种比较方便,但是比完全

.

3. ES6 扩展运算 ...

  //同样代码
   const source = { name:'小明' ,sayName:()=>{} ,prop:undefined, obj:{}};
   const  newObj   = {  ...source  }
  //先字符串序列化 再 parse解析回来
   console.log(  newObj  )
   VM575:1      {name: "小明", prop: undefined, sayName: ()=>{}, obj:{ }   }// 输出结果
    // 对二层结构的obj 赋值
    source.obj.name = 'rick'; 
    你会发现
    console.log( newObj.obj.name )    //  newObj.obj.name => rick 
    

总结:

  该方法简洁,比第二种方法好,但是,只是将 source 里面的值依次添加到 newObj,  
  当你把source.obj.name = 'rick';  newObj.obj.name 也等于 'rick'
  多层结构请不要用这个!!!!