教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

如何通過JS實(shí)現(xiàn)深拷貝？【web前端培訓(xùn)】

更新時(shí)間:2020年10月16日11時(shí)02分 來源:傳智播客 瀏覽次數(shù):

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


js深拷貝01

Js實(shí)現(xiàn)深拷貝02

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

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

Js實(shí)現(xiàn)深拷貝03

Js實(shí)現(xiàn)深拷貝04


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

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

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

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

Js實(shí)現(xiàn)深拷貝05

Js實(shí)現(xiàn)深拷貝06

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


猜你喜歡：

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

JS中修改this指向的方法有哪些?

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

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

0 分享到：
和我們?cè)诰€交談！