十分鐘看懂JS的LRU Cache 算法（上）

前文

在leetcode上刷題時，遇到一個可貴可以直接在前端用得上的算法思路（說實話，前端能用到算法的場景真的少的可憐），因此抓住和你們作一個分享。恰逢金三銀四求職季，多掌握一個知識點，多一份進大廠打工的但願！加油，打工人！

正文

簡介

關於緩存，有個常見的例子是，當用戶訪問不一樣站點時，瀏覽器須要緩存在對應站點的一些信息，這樣當下次訪問同一個站點的時候，就可使訪問速度變快（由於一部分數據能夠直接從緩存讀取）。 可是想一想房價都那麼高了，內存空間一樣也是珍貴的（嗚嗚嗚），因此必須有一些規則來管理緩存的使用，而LRU（Least Recently Used） Cache就是其中之一，直接翻譯就是「最不常用的數據，重要性是最低的，應該優先刪除」。這個規則還滿人性化的，常常訪問的，確定相對更重要。

需求分析

假設咱們要實現一個簡化版的這個功能，遵循下隔壁後端大佬同事的crud原則，先整理下需求：

1. 須要提供put方法，用於寫入不一樣的緩存數據，假設每條數據形式是{'域名','info'},例如{'https://segmentfault.com': '一些關鍵信息'}（若是是同一站點重複寫入，就覆蓋）;
2. 當緩存達到上限時， 調用put寫入緩存以前, 要刪除最近最少使用的數據；
3. 提供get方法，用於讀取緩存數據，同時須要把被讀取的數據，移動到最近使用數據 ；

4. 考慮到讀取性能，但願get操做的複雜度是O(1)（簡單理解就是，讀取緩存時不能去遍歷全部數據）

   數據選型

首先題目裏很明顯的提到了，須要可以標記數據的插入或使用順序， 因此確定不能簡單使用object實現，須要藉助數組，或者es6的Map和Set實現(Map和Set數據遍歷是有序的，遍歷順序即插入順序)；

其次須要實現O(1)複雜度，那就也沒法用單純使用數組來實現，因此能夠考慮的只有Map和Set，那麼最後再考慮下數據重複性的問題，會發現這道題不太須要考慮這個場景，因此咱們能夠先使用Map來實現。

因爲Map的特性是：新插入的數據排在後面，舊數據放在前面， 因此咱們只要專一於維持這個邏輯就行了:

• 若是遇到要刪除數據，則優先從前面刪除, 由於最前面的一定是最不經常使用數據；
• 若是讀取某條數據，則應該把數據放到末尾，保證該數據變爲最近使用數據；

簡單用幾個圖來表示對應的場景:

空間未滿時插入數據：

空間已滿時插入數據：

讀取數據：

算法實現

接下來就能夠一步步是實現代碼了，首先是最基本的 構造函數:

// 第一步代碼
class LRUCache {
    constructor(n){
        this.size = n; // 初始化最大緩存數據條數n
        this.data = new Map(); // 初始化緩存空間map
    }
}

接下來是put方法，put方法要處理3個邏輯：

1. 若是待寫入的域名，已存在於內存之中，直接更新數據並移動到末尾；
2. 若是當前未達到緩存數量上限，直接寫入新數據；
3. 若是當前已經達到緩存數量上限， 要先刪除最不常常使用的數據，再寫入數據；

其餘均可以直接操做，移動到末尾這個行爲，能夠拆成"先刪除該數據，再從末尾從新插入一條該數據"，這樣就簡單多了。因此咱們繼續更新代碼：

代碼以下：

// 第一步代碼
class LRUCache {
    constructor(n){
        this.size = n; // 初始化最大緩存數據條數n
        this.data = new Map(); // 初始化緩存空間map
    }
    // 第二步代碼
    put(domain, info){
        if(this.data.has(domain)){
            this.data.delete(domain); // 移除數據
            this.data.set(domain, info)// 在末尾從新插入數據
            return;
        }
        if(this.data.size >= this.size) {
            // 刪除最不經常使用數據
            const firstKey= this.data.keys().next().value; // 沒必要小心data爲空，由於this.size 通常不會取0，知足this.data.size >= this.size時，this.data天然也不爲空。
            this.data.delete(firstKey);
        }
        this.data.set(domain, info) // 寫入數據
    }
}

接着就只剩下get方法了，get方法一樣也要處理2種邏輯：

1. 根據給定的key，查找是否有對應的信息，若不存在則返回false；
2. 若第一步結果存在，則把被訪問數據移動到末尾；

// 第一步代碼
class LRUCache {
    constructor(n){
        this.size = n; // 初始化最大緩存數據條數n
        this.data = new Map(); // 初始化緩存空間map
    }
    
    // 第二步代碼
    put(domain, info){
        if(this.data.size >= this.size) {
        // 刪除最不經常使用數據
        const firstKey= [...this.data.keys()][0];// 次數沒必要小心data爲空，由於this.size 通常不會取0，知足this.data.size >= this.size時，this.data天然也不爲空。
        this.data.delete(firstKey);
        }
        this.data.set(domain, info) // 寫入數據
    }

    // 第三步代碼
    get(domain) {
        if(!this.data.has(domain)){
            return false;
        }
        const info = this.data.get(domain); //獲取結果
        this.data.delete(domain); // 移除數據
        this.data.set(domain, info); // 從新添加該數據
        return info;
    }
}

這一步要稍微注意的是，咱們是先移除數據後添加數據，嚴格遵循最大數量不超過n。

小結

到這裏其實代碼就結束了，也是一個相對輕鬆的一篇文章，估計花個十分鐘稍微看看也就大概掌握了，固然，細心的同窗可能留意到了，標題裏有個(上)字，意味着還有個（下）篇，由於本文的思路主要藉助了es6中Map的特色和優點來完成，有點取巧。而下一篇裏會介紹只用es5來處理這個場景。確切的說，下一篇會介紹更加正規和通用的處理方案

總結

最近專欄的粉絲漲的很快，也陸續收到一些讀者的反饋，有點受寵若驚，寫的東西能獲得你們的承認，內心是很開心。也但願你們對於喜好的文章，可以點贊和收藏，這樣也能必定程度上給我個反饋，哪些文章寫的較好，哪些文章還有不足，或者對於行文風格和內容有任何意見的，都歡迎私信交流。

最後依然是慣例，RingCentral目前在杭州也設置了辦公點，並且能夠申請長期遠程辦公，告別996，工做生活兩不誤，有興趣的同窗能夠私信諮詢（主頁有聯繫方式），能夠免費幫忙內推~