如何實現數組深拷貝和淺拷貝?

大家好,我是IT修真院北京總院第24期的學員,一枚正直純潔善良的web程序員

今天給大家分享一下,修真院官網JS任務4,深度思考中的知識點——如何實現數組深拷貝和淺拷貝?

1.背景介紹

用js處理數據的時候經常遇到需要保留原數據的情況,有時把數據賦給新的變量并不能解決問題, 原因是內存中僅保留一份數據。這時候需要制作一份數據的副本。

只有復雜類型變量(引用類型)存在深拷貝與淺拷貝的問題,而基本類型沒有深拷貝的概念。

要弄明白拷貝,首先要明白js中對象的組成。在js中一切實例皆是對象,具體分為原始類型和合成類型。原始類型對象指的是number、string、boolean等,合成類型對象指的是array、object以及function。

“堆內存”和“棧內存”


基本類型變量作為“值”保存于“棧內存”中。

引用類型變量作為一個指針保存在棧內存中,指向保存在“堆內存”中的引用類型的值

堆和棧的區別可以用如下的比喻來看出:

使用棧就象我們去飯館里吃飯,只管點菜(發出申請)、付錢、和吃(使用),吃飽了就走,不必理會切菜、洗菜等準備工作和洗碗、刷鍋等掃尾工作,他的好處是快捷,但是自由度小。

使用堆就象是自己動手做喜歡吃的菜肴,比較麻煩,但是比較符合自己的口味,而且自由度大。

深拷貝和淺拷貝

淺拷貝:拷貝一個變量的時候,復制了棧內存,沒有復制堆內存。

深拷貝:拷貝一個變量的時候,復制了棧內存,同時也復制了堆內存。

2.知識剖析

淺拷貝

淺拷貝可以理解為就是復制一份來引用,所有引用對象都指向一份數據,并且都可以修改這份數據。 對于字符串類型,淺拷貝是對值的拷貝,對于對象來說,淺拷貝是對對象地址的拷貝,也就是復制 的結果是兩個對象指向同一個內存地址,修改其中一個對象的屬性,則另一個對象的屬性也會改變

深拷貝

深拷貝則是復制變量值,對于非基本類型的變量,則遞歸至基本類型變量后,再復制。 深復制不同于淺復制,它會開辟新的內存地址,兩個對象對應兩個不同的地址,修改 一個對象的屬性,不會改變另一個對象的屬性

3.常見問題

1.如何實現數組深拷貝和淺拷貝?

2.深拷貝與淺拷貝的優缺點

4.解決方案

方法一: 用js的slice函數來實現

方法二:用js的concat方法

slice方法

對于array對象的slice函數,

返回一個數組的一段。(仍為數組)

arrayObj.slice(start, [end])

參數:

arrayObj

必選項。一個 Array 對象。

start

必選項。arrayObj 中所指定的部分的開始元素是從零開始計算的下標。

end

可選項。arrayObj 中所指定的部分的結束元素是從零開始計算的下標。


concat方法

concat() 方法用于連接兩個或多個數組。

該方法不會改變現有的數組,而僅僅會返回被連接數組的一個副本。

語法

arrayObject.concat(arrayX,arrayX,......,arrayX)

說明

返回一個新的數組。該數組是通過把所有 arrayX 參數添加到 arrayObject 中生成的。如果要進行 concat() 操作的參數是數組,那么添加的是數組中的元素,而不是數組。


淺拷貝的缺點是如果你改變了對象B所指向的內存地址,你同時也改變了對象A指向這個地址的字段。

深拷貝,這種方式會完全拷貝所有數據,優點是B與A不會相互依賴(A,B完全脫離關聯), 缺點是拷貝的速度更慢,代價更大 (可理解為耗費了更多內存空間)。

5.編碼實戰

demo

6.擴展思考

其他深拷貝的方法

json對象的轉換方法,兩次轉換



7.參考文獻

參考一:數組的拷貝

參考二:原始數據類型和對象類型的區別及深度拷貝解析

參考三:原生js對象的淺拷貝和深拷貝的總結

8.更多討論

閉包中保存到內存當中的數據是保存到棧中還是堆中的

都有

對象的深拷貝是怎么弄得




視頻鏈接

ppt鏈接



感謝大家觀看

今天的分享就到這里啦,歡迎大家點贊、轉發、留言、拍磚~

技能樹.IT修真院

“我們相信人人都可以成為一個工程師,現在開始,找個師兄,帶你入門,掌控自己學習的節奏,學習的路上不再迷茫”。

這里是技能樹.IT修真院,成千上萬的師兄在這里找到了自己的學習路線,學習透明化,成長可見化,師兄1對1免費指導。快來與我一起學習吧~

我的邀請碼:12361358,或者你可以直接點擊此鏈接:http://www.jnshu.com/login/1/12361358

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 小和尚是老和尚從山下撿來的,小和尚從來對佛法耳濡目染。更是對于無欲無求那一境界勝似向往。小和尚的法號為不動,意思是...
    檸檬我也喜歡閱讀 528評論 0 0
  • 前天在地鐵站見到一個頭低低面朝墻壁打電話的小姑娘,兩肩抖動顯然哭得蠻厲害,口齒模糊聽不清說了些什么,眼見她眼淚鼻涕...
    worldsendgfd閱讀 204評論 0 1
  • 第八章曾國藩為什么不喜歡曾紀鴻 龍生九子,每個都不一樣。曾國藩...
    Y飄雪流年閱讀 312評論 0 0