本文會(huì)講到幾種深拷貝的方法,

1.遞歸拷貝

這種方式 適用于多層數(shù)據(jù)嵌套

export function deepClone(obj){  //可傳入對(duì)象 或 數(shù)組
 //  判斷是否為 null 或 undefined 直接返回該值即可,
 if(obj === null || !obj)return obj; 
 // 判斷 是要深拷貝 對(duì)象 還是 數(shù)組
 if(Object.prototype.toString.call(obj)==="[object Object]"){ //對(duì)象字符串化的值會(huì)為 "[object Object]"
   let target = {}; //生成新的一個(gè)對(duì)象
   const keys =  Object.keys(obj); //取出對(duì)象所有的key屬性 返回?cái)?shù)組 keys = [ ]
   //遍歷復(fù)制值, 可用 for 循環(huán)代替性能較好
   keys.forEach(key=>{
     if(obj[key]&&typeof obj[key] === "object")
        //如果遇到的值又是 引用類(lèi)型的 [ ] {} ,得繼續(xù)深拷貝
       target[key] = deepClone(obj[key]);//遞歸
     else
       target[key] = obj[key];
     
   })
   return target  //返回新的對(duì)象
 }else if(Array.isArray(obj)){
   // 數(shù)組同理
   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);

總結(jié):

  該方法比較好,對(duì)于一些復(fù)雜嵌套的數(shù)據(jù)類(lèi)型可以完全深拷貝

.

2. JSON.stringify()

   const source = { name:'小明' ,sayName:()=>{} ,prop:undefined};
   const  newObj   = JSON.stringify( source )
  //先字符串序列化 再 parse解析回來(lái)
   console.log(JSON.parse(  newObj   ))
   VM575:1      {"name":"小明"}// 輸出結(jié)果

總結(jié):

  該方法簡(jiǎn)單,但是會(huì)吧引用類(lèi)型和undefined的屬性去除,相比第一種比較方便,但是比完全

.

3. ES6 擴(kuò)展運(yùn)算 ...

  //同樣代碼
   const source = { name:'小明' ,sayName:()=>{} ,prop:undefined, obj:{}};
   const  newObj   = {  ...source  }
  //先字符串序列化 再 parse解析回來(lái)
   console.log(  newObj  )
   VM575:1      {name: "小明", prop: undefined, sayName: ()=>{}, obj:{ }   }// 輸出結(jié)果
    // 對(duì)二層結(jié)構(gòu)的obj 賦值
    source.obj.name = 'rick'; 
    你會(huì)發(fā)現(xiàn)
    console.log( newObj.obj.name )    //  newObj.obj.name => rick 
    

總結(jié):

  該方法簡(jiǎn)潔,比第二種方法好,但是,只是將 source 里面的值依次添加到 newObj,  
  當(dāng)你把source.obj.name = 'rick';  newObj.obj.name 也等于 'rick'
  多層結(jié)構(gòu)請(qǐng)不要用這個(gè)!!!!