十分钟看懂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，工做生活两不误，有兴趣的同窗能够私信咨询（主页有联系方式），能够免费帮忙内推~