Object.assignPro-XMax(Lab小技巧-002)

標題和內容可能無關(微笑

Object.assign()相信你們都不陌生，就算平時沒怎麼用，也可能有在各種文章中見過它。在如此高的曝光率背後，咱們的assign是否是能承接咱們全部的寄託了？貌似是不能的:(

最近在開發產品配置的後臺，常常要對錶單數據進行合併，因此常常用到咱們的主角Object.assign，用起來也十分方便，直到有一次遇到這個問題--

兩個對象合併以後，結果卻不符合預期，assign方法的後參數對象覆蓋了前參數對象，按照對這個方法的直觀理解，是應該輸出圖中的第一個結果纔對。

深感疑惑的打開了MDN，看到了關於Object.assign的這樣一句解釋:

針對深拷貝，須要使用其餘方法，由於 Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個指向對象的引用，它也只拷貝那個引用值。

這樣就能解釋上面那個不符預期的結果了，Object.assign()拷貝的是屬性值，若是屬性值是對象，它只會拷貝引用值，也就形成了「覆蓋」的假象了。既然知道了緣由，咱們是否能夠搞一個assign的升級版，讓它把引用值的屬性也進行拷貝，恰好看到MDN裏面有關於它的polyfill，代碼以下--

不難發現，assign的核心就是枚舉對象的鍵值進行比對，而後得出拷貝的結果，那麼咱們的改造重心應該也是循環的這塊內容。幾經折騰，寫了個assignPro方法--

在新的方法中，將以前循環賦值的地方換成了一個新的方法handleR，在裏面將會對傳入的對象進行遞歸解構賦值，檢測到傳入的鍵值是非數組對象，則將其做爲參數再傳入handleR方法中，直到遍歷完全部的對象。

最終使用assignPro可使拷貝結果達到預期~請注意，這個玩意並無在生產中運用，你們抱着看看的心態就行了，固然若是可以繼續完善，好比對數組的處理...最後應該仍是能夠投入生產使用的。

最後順帶的講一下拷貝吧，assign能夠看作單層的深拷貝，若是真的想深拷貝某個對象，最方便的方法就是用JSON.stringify把對象轉成字符串，再用JSON.parse把字符串轉成新的對象。你們有興趣的話能夠試試看~

此次的小技巧到這就結束啦，你們遇到assign結果不符合預期的時候也不用慌，由於這是正常操做:)