首頁技術(shù)文章正文

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

更新時(shí)間:2020-10-16 來源:黑馬程序員 瀏覽量:

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


js深拷貝01

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

我們發(fā)現(xiàn)當(dāng)我們修改了obj2中的stu的name字段,兩個(gè)對象中的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è)對象的深拷貝,但是這種方式也會(huì)有些弊端,如:

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

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

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

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

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

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


猜你喜歡:

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

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

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

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!