首頁技術文章正文

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

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

如果實現(xiàn)一個拷貝,相信大家都之前學習過一個叫Object.assign({}, obj)這樣一個方法,我們都知道這是淺拷貝,當我們去將拷貝的對象修改某個復雜數(shù)據(jù)的屬性的時候,被拷貝的對象的字段也會進行修改,我們開看一個案例。


js深拷貝01

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

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

那我們如何實現(xiàn)一個深拷貝呢,有的會想到JSON.parse(JSON.stringify(obj));這個方法確實可以實現(xiàn)深拷貝,我們先來驗證下結果。

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

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


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

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

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

那我們如何使用js來實現(xiàn)一個深拷貝呢。

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

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

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


猜你喜歡:

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

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!