(JavaScript)淺拷貝Shallow Copy & 深拷貝Deep Copy — 使用Lodash來處理資料吧!

from https://lodash.com/

本篇同步發佈在Medium平台上 Medium連結

前一篇有提到pass by reference與pass by sharing的原理,那當我們要拷貝物件型別的資料時該如何實作呢,以下就讓我們來看看吧!

淺拷貝

Array

  1. 使用arr.slice(0)
  1. 使用展開運算子[…arr]

Object

  1. 使用Object.assign({}, obj1)
  1. 使用展開運算子{…obj}

淺拷貝會遇到的問題

當物件中含有物件時,淺拷貝僅能拷貝物件的第一層,第二層之後它的記憶體位址還是指向相同位置,如下範例:

深拷貝

透過Lodash Library來做深拷貝,網址如下:

Lodash A JavaScript utility library delivering consistency, modularity, performance, & extras.

在第8行使用Lodash CDN引入,在第18行使用 _.cloneDeep(obj1); 做深拷貝的動作,就能將多層物件通通都拷貝啦!

Lodash也提供了相當多實用的函式,對經常處理資料的使用者可以省去很多時間,Lodash Methods 共分為以下幾種,若有興趣可至Lodash網站深入研究喔!

- Array
- Collection
- Date
- Function
- Lang
- Math
- Number
- Object
- Seq
- String
- Util
- Properties
- Methods
comments powered by Disqus