JS實現(xiàn)深度拷貝的方法【web前端培訓(xùn)】

如果實現(xiàn)一個拷貝,相信大家都之前學(xué)習(xí)過一個叫Object.assign({}, obj)這樣一個方法,我們都知道這是淺拷貝,當(dāng)我們?nèi)⒖截惖膶ο笮薷哪硞€復(fù)雜數(shù)據(jù)的屬性的時候,被拷貝的對象的字段也會進(jìn)行修改,我們開看一個案例。

我們發(fā)現(xiàn)當(dāng)我們修改了obj2中的stu的name字段,兩個對象中的name字段都變成了小紅,這就是我們所說的淺拷貝.

那我們?nèi)绾螌崿F(xiàn)一個深拷貝呢,有的會想到JSON.parse(JSON.stringify(obj));這個方法確實可以實現(xiàn)深拷貝,我們先來驗證下結(jié)果。

通過查看我們確實發(fā)現(xiàn)可以實現(xiàn)一個對象的深拷貝,但是這種方式也會有些弊端,如:

1.性能問題，stringify再解析其實需要耗費(fèi)較多時間，特別是數(shù)據(jù)量大的時候。

2.一些類型無法拷貝，例如函數(shù)(不輸出)，正則(輸出空對象)，時間對象(輸出時間字符串)，Undefiend(不輸出)等等問題

那我們?nèi)绾问褂胘s來實現(xiàn)一個深拷貝呢。

通過以上方式使用函數(shù)遞歸的方式,判斷需要拷貝的數(shù)據(jù)中字段的數(shù)據(jù)類型,為新的空對象追加新的字段實現(xiàn)了深拷貝。


猜你喜歡：

Js實現(xiàn)深拷貝復(fù)制的方法

Js中深拷貝與淺拷貝的區(qū)別

web前端開發(fā)培訓(xùn)課程