Immutable.js 可持久化數據結構以及結構分享
為什麼用Immutable.js代替普通js對象？
將數據視為不可變，將給你帶來很多好處。事實上，這是也React背後的原理：React的元素是不可變的。
但是用Immutable.js有什麼好處呢？
首先有一個非常巨大的對象…
這裡有100,000條待辦事項：
我要把第50,005條任務的completed改為ture。
用普通的JavaScript對象
這項操作運行了134ms。
為什麼用了這麼長時間呢？因為當使用，JavaScript會從舊對象（淺）複製每個屬性到新的對象。
我們有100,000條待辦事項，所以意味著有100,000個屬性需要被（淺）複製。
這就是為什麼花了這麼長時間的原因。
在JavaScript中，對象默認是可變的。
當你複製一個對象時，JavaScript不得不複製每一個屬性來保證這兩個對象相互獨立。
100,000個屬性被（淺）複製到新的對象。
使用Immutable.js
這項操作運行了1.2ms。速度提升了100倍。
為什麼會這麼快呢？
可持久化的數據結構
可持久化的數據結構強制約束所有的操作將返回新版本數據結構並且保持原有的數據結構不變，而不是直接修改原來的數據結構。
這意味著所有的可持久化數據結構是不可變的。
鑒於這個約束，第三方庫在應用可持久化數據結構後可以更好的優化性能。
性能提升
為了直觀的觀察，讓我們嘗試一個小小例子。
鍵值對映射數據：
我們可以用一個普通的JavaScript對象來保存：
轉換成一棵數據樹，像這樣：
圖片來源:維基百科
通常來講，你可以從根節點沿著上圖的路徑來獲取你想要的值。
如果你想獲取，從根節點開始，沿著i，n，就可以到達值為5的節點。
如何去修改呢？
比如我們想把鍵為tea的值3改成14。
我要建造一個新的樹，並且儘可能重用已經存在的節點
綠色表示新建的節點。
灰色的節點失去的索引，將會被回收
正如你所看到的，我們只是重新創建了4個新的節點來更新這個樹。其他節點都被重用了。
這叫 結構共享
Immutable.js就是通過這種方式實現。創建一個樹，每個節點最多有32個分支。
這張圖展示了一個真實的
當我們更新一個節點，只有幾個節點需要被重新創建。
Immutable.js通過創建多種類型的節點來保持樹結構的緊湊和性能：
萬物皆有兩面性…
請不要認為這篇文章的意思是「你應該經常使用Immutable.js」，準確的講，我只是告訴你用它的所有好處，以及為什麼要使用它。
當我在寫代碼的時候，我首先會用普通的JavaScript對象和數組，當我使用Immutable.js時，我需要非常確定，比如一個對象包含10,000個屬性。我幾乎從不使用Immutable.js，因為大多數時候的對象都很小。
譯者：miaoyu
鏈接：http://www.zcfy.cc/article/4292
原文：https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2
※微軟宣布Edge瀏覽器上線iOS和Android：對抗Chrome
※更快地構建 DOM：使用預解析，async，defer 以及 preload
※你是幾號？
※程序員在國慶節如何假裝旅遊？
※國慶加班是一種什麼樣的體驗？
TAG:JavaScript |