復合數據類型進行深拷貝淺談

最近做項目時，碰到用到復合數據類型進行對比，需要保留最開始的值和最後的值進行對比，用到深拷貝，正好好好總結一下

雖有javascript沒有堆棧的說法，但是卻一直被應用。開始進入分析，剖析

數組進行深拷貝

let arr = [1, 2, 3, 4, ‘sinosaurus‘]

• 1.使用slice

  let newArr = arr.slice(0)
  console.log(newArr) //   [1, 2, 3, 4, "sinosaurus"]
  newArr[0] = 77  
  console.log(newAr) //  [77, 2, 3, 4, "sinosaurus"]
  console.log(arr)  //   [1, 2, 3, 4, "sinosaurus"]
   
  

• 1. 使用es6擴展運算符結合解構賦值

     let [...newArr1] = arr
     console.log(newArr1)  // [1, 2, 3, 4, "sinosaurus"]
     newArr1[0] = 77
     console.log(newArr1)  // [77, 2, 3, 4, "sinosaurus"]
     console.log(arr)      // [1, 2, 3, 4, "sinosaurus"]

若是數組變復雜了，則數組的方法無法解決

let arr = [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘兩個黃鸝鳴翠柳，我還沒有女朋友‘}]

若是繼續使用剛才的方法，會發現修改數組中對象的值，會影響其他的原始的數據，牽一發而動全身，因而考慮換其他方法

let [...newArr] = arr
console.log(newArr) //  [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘兩個黃鸝鳴翠柳，我還沒有女朋友‘}]
newArr.zhen = ‘十年生死兩茫茫，不思量，自難忘‘
console.log(newArr)  // [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘十年生死兩茫茫，不思量，自難忘‘}]
console.log(arr)     // [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘十年生死兩茫茫，不思量，自難忘‘}]
//另一個方法依舊如此

因而考慮其他方式

• 封裝函數 (這種才算的上真正意義上的深拷貝) 雖然是復合數據類型，但是最終還是不同的簡單數據類型進行結合的

  function deepCopy(o1, o2) {
  //判斷順序， 數組 ==> 對象==> 淺拷貝
  for (let key in o1) {
    if (o1[key] instanceof Array) {
      o2[key] = []
      deepCopy(o1[key], o2[key])
    } else if (o1[key] instanceof Object) {
      o2[key] = {}
      deepCopy(o1[key], o2[key])
    } else {
      o2[key] = o1[key]
    }
  }
  }
  let newArr2 = []
  deepCopy(arr, newArr2)
  console.log(newArr2) // [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘兩個黃鸝鳴翠柳，我還沒有女朋友‘}]
  newArr2[0] = ‘十年生死兩茫茫，不思量，自難忘‘
  console.log(newArr2) // [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘十年生死兩茫茫，不思量，自難忘‘}]
  console.log(arr)     // [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘兩個黃鸝鳴翠柳，我還沒有女朋友‘}]

• 利用JSON的方法

  let newArr3 = JSON.parse(JSON.stringify(arr))
  console.log(newArr3)  // [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘兩個黃鸝鳴翠柳，我還沒有女朋友‘}]
  newArr3[0] = ‘十年生死兩茫茫，不思量，自難忘‘
  console.log(newArr3)  // [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘十年生死兩茫茫，不思量，自難忘‘}]
  console.log(arr)      // [{s: ‘當時明月在，曾照彩雲歸‘, zhen: ‘兩個黃鸝鳴翠柳，我還沒有女朋友‘}]

復合數據類型進行深拷貝淺談