深拷貝與淺拷貝


Call By Value & Call By Reference 中曾經提到值的型別以及傳遞方式。
而這篇文章會針對 Call By Reference 中的資料複製方法,做更詳細的說明。


🌿 Shallow Copy(淺拷貝)

Object(物件型別)的資料型別會把東西連到某個記憶體空間,而非本身的值。因此在複製時,是讓變數指向同樣的「記憶體位置」,而非複製出一個全新的記憶體位置及值。

const a = {
  name: "Hobby",
  gender: "female",
};

const b = a;

a 和 b 指向的記憶體位置相同

方法一

當改變其中一個變數內容時,會連帶影響到另外一個,因為是指向同樣的位置

方法二:Object.assign()

  • Object.assign() 的方法在單層物件時,的確可以達到深複製效果
  • 若物件裡還有物件型別的資料,則內層資料同樣會指向同一位置,因此仍會相互影響

資料內又有一物件型別的資料

方法三:展開語法(Spread syntax)

  • 使用 ES6 的語法糖-展開語法(Spread syntax),也會遇到與 Object.assign() 一樣的問題
  • 若物件裡還有物件型別的資料

🌿 Deep Copy(深拷貝)

方法一:JSON.stringify()、JSON.parse()

  • 利用 JSON.stringify() 先將資料轉成基本型別,即可複製值,接著再利用 JSON.parse() 將文字轉成物件

方法二:Lodash 套件的 _.cloneDeep 方法

  • 利用 Lodash 套件的 _.cloneDeep 方法,即可深拷貝資料

🌿 參考資料


Photo by Katrin Hauf on Unsplash


文章作者: Hobby Lee
版權聲明: 本部落格所有文章除特別聲明外,均採用 CC BY 4.0 許可協議。轉載請註明來源 Hobby Lee !
  目錄