詳解lodash中的cloneDeep使用細節

2023-01-26 18:01:36

正文

lodash中的cloneDeep是一個使用頻率比較高的方法，然而你真的理解其中的細節處理嗎？如果下面幾個問題你還有疑惑那麼本文對你或多或少有些幫助。

cloneDeep中支援拷貝函數、Error物件、DOM節點以及WeakMap物件嗎？
cloneDeep中使用了哪種演演算法呢？
瀏覽器中提供的實現深拷貝的方式除了JSON.parse(JSON.stringify())，還有其他方法嗎？
當遇到迴圈參照時，如何進行深拷貝操作來避免出現棧溢位呢？

當上面這些問題你還有疑惑時，可能會在一些比較少見的場景中遇到一些出乎意料的問題，希望本文能夠對你有所幫助。

支援的資料型別

lodash中支援了很多種的資料型別，包括 arrays、array buffers、 booleans、 date objects、maps、 numbers、Object、regexes、sets、 strings、symbols、typed arrays，以及包括arguments這個引數（不過拷貝後會丟失一些資訊）。

但是由於一些原因，還有一些型別，lodash中預設時不支援的。至於error objects、functions、DOM nodes、以及WeakMaps預設是不支援的，lodash預設會返回一個控物件，所以如果資料中存在這些資料型別時需要特別關注一下，拷貝之後就無法獲取對應的資料了。

cloneDeepWith

如果拷貝的資料中存在不支援的資料型別時，我們改怎麼辦呢？

lodash為我們提供了另外一個方法，與cloneDeep比較類似，只不過我們可以在這個方法中傳入一個自定義函數，當遇到不支援的資料型別時，我們可以根據場景來定義自己的深拷貝的實現邏輯。比如說當拷貝函數時，返回函數本身等。

lodash官網有著比較詳細的例子，也可以參考一下。

拷貝演演算法介紹

lodash作為一個使用非常廣泛的庫，在拷貝演演算法上使用了structured clone algorithm，這個演演算法細節描述可以參考 html.spec.whatwg.org/multipage/s… ，與目前瀏覽器中的structuredClone方法實現採用的是一樣的演演算法，在其他一些場景中大家進行拷貝方式的實現基本是一致的，這也保證了使用cloneDeep方法具有良好的相容性。

structuredClone VS cloneDeep

目前瀏覽器中提供了structuredClone 方法來處理需要深拷貝的場景，那我們還需要使用lodash提供的cloneDeep方法嗎？從目前來看這個API在web場景的相容性：

目前看來相容性還不是特別高，大家可以根據自己的場景來進行選用，畢竟使用lodash會增加包體積大小，對於一些追求極致效能的場景包體積肯定越小越好。

迴圈參照處理方法

在處理拷貝過程中一般都會遇到一個比較棘手的問題：迴圈參照, 看下面這段簡單的程式碼：

const objb = {
  b: null
};
const obja = {
  a: objb
};
objb.b = obja;
console.log(objb);

在控制檯中輸出objb物件，展開其屬性，我們可以看到這個結果：

可以看到objb物件的屬性可以無限展開下去，這樣就形成了迴圈參照。形成迴圈參照的原因就是，objb.b參照了obja物件；但是obja.a屬性又參照了objb物件。

如果我們進行不斷的拷貝而不做針對迴圈參照的處理，必然會出現這個錯誤：

那麼lodash中是如何處理這個問題的呢？

其實lodash中處理迴圈參照的方法非常簡單清晰，下面這段程式碼是處理迴圈參照的核心程式碼。可以看出lodash中主要通過快取每個值對應的拷貝結果來解決迴圈參照的問題。

針對上面的這個存在迴圈參照的物件，我們可以來按步驟進行分析一下cloneDeep(objb)時是如何解決迴圈參照的：

處理objb物件，stack.get(objb)不存在，所以將代表objb的拷貝結果result放到stack中，然後逐個處理objb上的屬性
處理objb中的b屬性，stack.get(obj.b)其實也就是stack.get(obja)，此時stacka也在stack中，因此也將代表obja的拷貝結果result放置到stack中，然後逐個處理obja上的屬性
處理obja上的a屬性，stack.get(obja.a)其實也就是stack.get(objb)，經過前兩步的處理，我們只在此時，objb已經存在stack中了，stack.get(objb)返回一個拷貝後的物件

拷貝過程結束，返回拷貝的結果可以結合下面這幅圖來進行理解：