Javascript知識點:淺拷貝和深拷貝

Awbeci 發表於 2022-04-29

前言

本文來分析javascript開發中經常會遇到的淺拷貝和深拷貝以及總結網上各種實現方式,希望對大家有所幫助。

什麼是淺拷貝和深拷貝?

先聊一下Javascript的資料型別有哪些?

值型別:

  1. 數字型(Number)
  2. 字元型別(String)
  3. 布林型別(Boolean)
  4. Null
  5. undefined
  6. Symbol

引用型別:

  1. 物件型別(Object)
  2. 陣列型別(Array)
  3. 函式型別(function)
  4. 正則型別(Regex)
  5. 日期型別(Date)

淺拷貝定義:

淺拷貝其實是隻複製了值型別 引用型別也能複製過去 不過複製的是引用型別的指標地址 如果後面對其修改雙方都會產生影響,而不是真正拷貝,因此存在父物件被篡改的可能。

深拷貝定義:
深拷貝就是不但複製了值型別也複製了引用型別 不過引用型別的指標地址都是獨立存在的 相互修改不影響

瞭解了深拷貝和淺拷貝的定義,接下來我們來講講如何實現?

實現淺拷貝方式

陣列:

  • [...]
  • [].slice()
  • [].splice(0)
  • Array.from()

物件:

  • {...}
  • Object.assign({},a)

陣列和物件都可適用

  • lodash包中的clone()方法

實現深拷貝方式

陣列和物件都可適用

  • JSON.parse(JSON.stringify()) 缺點:不能複製undefined和function型別
  • 遞迴方法(遍歷),缺點:不能解決迴圈引用問題
  • jquery的$.extend()方法
  • npm lodash包中的cloneDeep()方法(推薦)

總結

1、要理解什麼是淺拷貝和深拷貝以及區別,再在理解的基本上再去找解決方案和實現方法。

引用

js物件淺拷貝和深拷貝詳解
how-do-i-deep-clone-an-object-in-react
lodash cloneDeep