JavaScript Memoization 故事介紹

SunBu
6 min readMar 8, 2020

--

用故事解說 Memoization

Photo by AbsolutVision on Unsplash

其實網路上已經有很多的文章在說明什麼是 Memoization ,但大多都是用演算法來做說明,對於演算法不是很熟的朋友可能會有點不懂是在幹什麼,不過沒關係,這在個文章裡我會用故事搭配程式碼的方式來介紹 Memoization 是什麼以及解決什麼樣的問題。

故事開始:

小明是建築工人,他的工作是檢查建築水管有沒有破裂。每當有問題發生小明就必須先去現場,看看他需要修理水管,然後前往倉庫,並帶回必要的工具做修理。

當小明一有要修的水管就要特地跑到好遠好遠的倉庫拿工具來修理,一次還好,兩次三次四次,這樣下來跑到倉庫這件事情就花了很多的時間。

所以小明有了應對方法,將很常用到的工具『帶在身上』,這樣就省了很多時間不用跑來跑去。

以上 Memoization 就是類似小明把工具『帶在身上』這一概念。

什麼是 Memoization?

Memoization 是一種優化的技巧,把需要大量計算才得到的回傳值給暫存起來,以便下次要使用相同參數調用時可以立馬回傳結果,就不用再一次計算來達到效能的提升。

這個優化方法並不是只有在 JS 上可以使用,在其他程式語言也是蠻常見的方法。

實際程式:

這裡我們先建立一個 function 叫 Building(代表正在做的建築)以及一個參數叫 tasks (代表在建築物上要做的工作)。

故事變成程式碼的樣子
小明好累一直跑到倉庫拿工具XD

Day 1 小明收到修理大水管的任務,跑到了倉庫拿相對應的工具做修理。

Day2 又有大水管壞了,小明再一次跑到倉庫拿工具修理。

Day 3 其他地方的大水管也壞了,小明又跑到了倉庫拿同樣的工具修理。

小明發現最近很常有大水管壞掉,所以想把修大水管的工具給帶在身上就不用特地跑到倉庫拿工具了。

那我們來做一個工具箱,好讓小明工作速度給加快起來!

工具箱程式(這就是 Memoization)

在這之後就可以用這個工具箱來提升工作效率了!

有了工具箱小明現在只要跑一次倉庫就好了耶~

你可以嘗試給小明修不同的東西看看,因為沒有相對應的工具,所以小明會跑到倉庫拿工具,不過小明這次學乖了把這個工具放到工具箱裡就不用再跑回倉庫拿工具了。

Memoization 使用時機

  • 對於所有需要昂貴運算資源的函式(expensive function calls, heavy computations)。
  • 經常會用在需要將前一次的值再次帶入的遞迴函式(recursive function)。

要注意的問題

這樣的快取機制,雖然在執行效能上有所有好處,但最直接的問題就是會佔用記憶體,假設我們的程式要處理大量的資料,那就可能會佔用非常大量的記憶體而不會釋放。

所以某些函式程式語言還會對這方面問題做支援快取資料數量的限制,JS 就沒有這個機制了,但你可以自己試著增加這樣的設計。

總結

如果我們的參數不只一個的話可以看這兩篇教學,裡面也會介紹什麼是 Memoization 以及其如何應用:

參考資料:

覺得不錯的話可以幫我按上面的 Like 五次唷~

--

--

SunBu

熱愛學習新技術和分享的年輕人,目前常用技術是 Vue、React