平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“关于前端面试中常提到的LRU缓存策略详析”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。
LRU
LRU（Least Recently Used）最近最少采用缓存策略，理解这一步时，根据历史数据记录，当数据超过了限定空间的时候对数据清理，清理的原则是对很久没有采用到过的数据进行清除。
一、为什么要采用Map是来定义容器
在这个场景下，Map在保存数据时会按照记住存储数据时候的顺序，这样存储的数据是有序列的，同时且会维护键值对的插入顺序，Map存储数据的键值能够是任意类型（对象或者基本类型都可），Map提供了get、set、delete方法十分便于；而Object的话是无序，当然也能够采用Array。另外Map的算法复杂度是O(1)，处理数据更迅速。
二、应用场景
- redis
- 浏览器浏览记录
- vue中内置组件keep-alive
三、代码实现
实现的大概思路如下所示：
- 新建一个LRUCache类
- 定义容器以及容器的容量
- 定义set方面，设置容器中的数据
- 定义get方法，拿到容器中的数据
class LRUCache {
constructor(length) {
// 定义容器容量
this.length = length;
// 创建数据容器，生成一个空映射
this.map = new Map();
}
// 设置key值
set(key, value) {
}
// 获取key值
get(key) {}
}下面就是对set方法和get方法的处理：
set
- 在这个场景下，当容器长度不超过设定的长度：设置key值，但是为了达到缓存策略的效果，需我们先删除数据，后添加到容器的最后一条
- 当容器长度超过设定的长度：先删除掉容器中的第一条数据
get
- 先拿到数据值，然后删除该条数据，再设置数据到最后
class LRUCache {
constructor(length) {
// 定义容器容量
this.length = length;
// 定义数据容器
this.map = new Map();
}
// 设置key值
set(key, value) {
// 如果容器容量超过设定的容量
if (this.map.size >= this.length) {
// 等价于：let firstKey = this.map.keys()[0]
//map.keys().next()查询容器中第一条数据的key值
//keys()会返回一个迭代器对象，包含了实力对象中的每一个key值
let firstKey = this.map.keys().next().value;
//删除容器中第一条数据
this.map.delete(firstKey);
}
// 容器中存在key就先删除掉
if (this.map.has(key)) {
this.map.delete(key);
}
// 删除后重新加入该条数据
this.map.set(key, value);
}
// 获取key值
get(key) {
// 获取key值不存在返回null
if (!this.map.has(key)) {
return null;
}
// 获取key值
let value = this.map.get(key);
//删除容器中的该条数据
this.map.delete(key);
//重新把该条数据添加到容器中
this.map.set(key, value);
return value
}
}
// 创建实例对象并设置容器大小
const lruCache = new LRUCache(5)添加6条数据
lruCache.set('name', 'zhangsan')
lruCache.set('class', 'xinguan')
lruCache.set('age', 19)
lruCache.set('sex', '男')
lruCache.set('occupation', '前端工程师')
lruCache.set('year', '2023')
console.log(lruCache, 'lruCache')从实现思路看，对lruCache添加了6条数据同时按顺序排列，打印出来只剩5条数据，添加的第一条(‘name’, ‘zhangsan’)被删除了。
从实现思路看，随后拿到class的值，发现key为class的这条数据跑最后了。因为在get时候先delete后set了。
console.log(lruCache.get('class'), 'lruCache')//xinguan
总结
结合项目来看，总的来说，lur缓存策略适合结合实际项目边做边理解。先抓住核心思路，再逐步补上细节和边界处理，最后效果会更稳定，也更容易复用。