JavaScript克隆一個對象,老方法執行的只是淺拷貝,需要特別注意

點擊上方藍字關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

如何克隆一個對象,日常工作中我們會根據一些實際情況,採取一些或複雜或簡單的方式,其中最為簡單的方法就是利用對象的方法,如下:

Object.assign({}, obj)

舉一個例子:

JavaScript克隆一個對象,老方法執行的只是淺拷貝,需要特別注意

控制檯輸出同樣一個對象,實現了對obj的拷貝。

JavaScript克隆一個對象,老方法執行的只是淺拷貝,需要特別注意

需要注意的是,這種方法執行的是淺拷貝,而不是深拷貝,這就意味著嵌套的對象不會被複制。仍然引用與原始相同的嵌套對象。

一,看一段代碼的輸出

JavaScript克隆一個對象,老方法執行的只是淺拷貝,需要特別注意

這段代碼中,obj裡有一個屬性對象c。執行克隆之後,複製的只是c的引用。先看一下這段代碼的輸出結果:

JavaScript克隆一個對象,老方法執行的只是淺拷貝,需要特別注意

接下來我們來改變一些屬性值,重新輸出。

二,重置屬性後的輸出

JavaScript克隆一個對象,老方法執行的只是淺拷貝,需要特別注意

我改變了兩個屬性值,一個是屬性c對象裡的一個屬性age。一個是屬性b。看一下輸出結果:

JavaScript克隆一個對象,老方法執行的只是淺拷貝,需要特別注意

結果發現,那個克隆的對象b屬性沒有變,說明它拷貝成功,而c裡的age也變成了45,那就說明它沒有真正拷貝。

總結一下:

Object.assign執行的是淺拷貝,要記住這一點,這個方法的用處是很大的。最常用的場景就是前端給接口傳參數據的時候。


分享到:


相關文章: