js 淺拷貝有大用

 

如題

 像淺拷貝、深拷貝這類的知識點咱們應該都明白是怎麼回事，大部分都是在面試的時候會被問到。大多讓你實現一個深拷貝。現實中咱們都用比較暴力直接的手段 JSON stringify.

一句話就搞定，管他性能不性能的。不過寫了這麼多代碼，深拷貝用的確實不怎麼多。反而淺拷貝用的比較多，尤爲是 Object.assign 被大量使用。

固然我並非想分享他的實現遠離。而是想說下我忽然感受到淺拷貝有個亮點。

 不知道你們有沒有聽過，共享結構這個詞。

意思是一個新的對象的結構和舊對象的結構一至，是從原始對象直接複製過來的。固然不是說直接負值的，而是使用上面的Object.assign 實現的。

其結果是產生一個新對象。

 

淺拷貝的做用在於對於簡單類型能夠直接複製其值，對於複雜類型 複製的是一個對象具柄，也就是兩個對象指向的是同一塊內存區域。

 

好了，經過這種方式產生的兩對象，有什麼用呢？  咱們能夠很方便的檢測到 新舊兩個對象的差別，也就是哪一個key的值不一樣，能夠經過一層便利就能夠對比出來。

這個時候能夠腦補下畫面，聲明一個對象 aaa，裏面包含 兩個key ，一個是title 表示標題，一個是list 表示列表 一個數組 【1，2，3】，而後使用Object.assign，進行淺拷貝一個新對象。

新對象和原對象作比較 即使是兩個對象的內容沒有作任何改變，可是兩對象是徹底不等的。由於是生成了一個新對象。可是當咱們比較下兩個對象的list的時候，是徹底相等的。

 

第二部。再使用 Object.assign 對願對象進行生成一個新對象，這個時候 咱們增長第三個參數，是一個對象 ，key 是list  【1，2】。

好，獲得結果  比較兩個對象的list，是徹底不等的。由於指向了不一樣的飲用地址。不知道咱們上面這麼描述是否清洗，你們腦補的怎樣了。

 

腦補成功了嗎，是否是以爲這個特性很6，那麼咱們本身就能夠寫一個獲取新舊對象的差別方法了。返回差別的key的列表。是吧？

另外說下 腦補，

學技術腦補仍是很重要的。沒有電腦的時候就要靠腦子進行預演。

 

應用場景

那這個特性的應用場景有哪些呢？這個我也說很差，你們能夠本身想下本身曾作過的項目。  我這裏能想到的場景有2個

1. 好比咱們要一個小程序的查詢列表頁面，這個頁面包含不少的條件。有的在當前頁面，有的須要跳轉頁面設置條件，這個時候就須要在回到頁面後進行判斷條件是否有變化，有變化就從新請求數據渲染頁面。

2. 我想到了redux裏的reducer這個純函數，reducer得到state和action兩個對象，無論state有無變化都會返回一個新對象。這裏使用的就是這個特性。

 

共享結構實現的方法

 1.上面說的 object.assgin

2. 擴展運算符 

3. 若是你們知道的話能夠告訴哈

 

總結下：

本節就是介紹了下淺拷貝的妙用，以及提到的一個名字 「共享結構」，以及他的使用場景。固然這種主要是對簡單對象，層級也就2層把。層級太多的話複雜度就增長了。具體是否能適用就看具體的場景了。

 

家裏電腦卡，錯別字較多，還有代碼回頭補上。

 

以上也能夠在 喜馬拉雅 上 訂閱 「大前端開發解惑」 進行收聽