在前端开发中，经常会涉及到对数据的缓存、去重、排序等操作。而 flru 就是一款非常优秀的 npm 包，它能够帮助你轻松地解决这些问题。本文将详细介绍 flru npm 包的使用方法，并提供示例代码，以帮助您尽快上手。
1. flru 简介
flru 是一个轻量级的 JavaScript 包，它提供了一种缓存、去重、排序的数据处理方式。flru 的全称是 First Least Recently Used，即首次最近未使用。它是介于 LRU 缓存算法和 First-In-First-Out（FIFO）算法之间的一种数据结构。flru 将数据存储在一个 map 中，map 中又由一个双向链表串联起来，用于记录数据的使用历史， flru 算法就是通过对这个双向链表的操作来对数据进行缓存、去重、排序等操作。
相比于 LRU 与 FIFO 算法，flru 算法具有以下优点：
- 对频繁查询的数据可以做出个性化的缓存策略。
- 仅使用两个闭包，实现缓存池数据同步与 LRU 缓存链表，内存占用较少。
- 可以同时支持插入 Object / array / 基础数据类型，较为通用。
flru 的核心是通过一个封装的对象 lru 进行数据缓存，该对象具有 get、set、remove、batch、sort、unique 等方法，通过这些方法可以轻松对数据进行增删改查、去重、排序等操作。
2. flru 的安装和引入
使用 npm 安装 flru：
$ npm install flru
然后在需要使用的文件中引入 flru 包：
const flru = require('flru')为了方便起见，我们一般会给引用的 flru 包加一个别名：
const FLRU = require('flru')3. flru 的使用
3.1 创建和初始化缓存池
创建一个新的 lru 实例：
// 创建一个容量为 5 的缓存池 const cache = new FLRU(5)
3.2 向缓存池中添加数据
在 flru 中，我们可以通过 set 方法向缓存池中添加数据：
cache.set(['name', 'age'], 'ming', 18)
这样，缓存池中就会加入一个包含键名 [ 'name', 'age' ]，键值为{ name: 'ming', age: 18 } 的数据。
3.3 从缓存池中读取数据
通过 get 方法，我们可以从缓存池中读取数据：
cache.get(['name', 'age'])
这样，就可以获得键为 [ 'name', 'age' ] 的数据。
3.4 缓存池中的数据操作
flru 提供了各种数据操作方法，如 remove、batch、sort、unique 等方法，下面我们来一一介绍。
3.4.1 remove 方法
通过 remove 方法，我们可以从缓存池中删除指定键名的数据：
cache.remove(['name', 'age'])
这样，键名为 [ 'name', 'age' ] 的数据将从缓存池中被删除。
3.4.2 batch 方法
通过 batch 方法，我们可以批量添加数据：
cache.batch([
[['language', 'level'], 'java', 'professional'],
[['language', 'level'], 'c++', 'professional'],
[['language', 'level'], 'javascript', 'advanced'],
])这样，就可以批量添加三条数据。
3.4.3 sort 方法
通过 sort 方法，我们可以对缓存池中的数据进行排序：
// 以 age 从小到大排序 cache.sort((a, b) => a.value.age - b.value.age)
3.4.4 unique 方法
通过 unique 方法，我们可以对缓存池中的数据进行去重：
cache.unique((cur, cmp, curIndex, cmpIndex) => {
return cur.key.every((item, index) => item === cmp.key[index])
})这样，缓存池中的数据就会去重。
3.5 缓存池的边界处理
在 flru 中，当缓存池达到预设的容量上限时，将自动淘汰最久未被访问的数据。
const cache = new FLRU(2) cache.set(['a'], 'a') cache.set(['b'], 'b') cache.set(['c'], 'c') console.log(cache.get(['a'])) // undefined console.log(cache.get(['b'])) // 'b' console.log(cache.get(['c'])) // 'c'
在创建缓存池时，还可以指定 onEviction 回调函数进行边界处理：
const cache = new FLRU(2, function(key, value) {
console.log(`[${key}] ${value} was evicted`)
})可以看出，当缓存池达到容量上限时，会批量删除一些不需要的数据，并将其打印出来。
4. 总结
今天我们介绍了 flru 这个 npm 包的使用方法，学习了 flru 中缓存池的基本操作，包括添加数据、读取数据、批量添加数据、排序、去重等操作，同时也详细介绍了 flru 算法的优点与使用技巧，希望这篇文章能够对您的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fc0