在前端开发中，经常会涉及到对数据的缓存、去重、排序等操作。而 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：
- --- ------- ----
然后在需要使用的文件中引入 flru 包：
----- ---- - ---------------
为了方便起见，我们一般会给引用的 flru 包加一个别名：
----- ---- - ---------------
3. flru 的使用
3.1 创建和初始化缓存池
创建一个新的 lru 实例：
-- ------- - ---- ----- ----- - --- -------
3.2 向缓存池中添加数据
在 flru 中，我们可以通过 set 方法向缓存池中添加数据：
------------------ ------- ------- ---
这样，缓存池中就会加入一个包含键名 [ 'name', 'age' ]，键值为{ name: 'ming', age: 18 } 的数据。
3.3 从缓存池中读取数据
通过 get 方法，我们可以从缓存池中读取数据：
------------------ -------
这样，就可以获得键为 [ 'name', 'age' ] 的数据。
3.4 缓存池中的数据操作
flru 提供了各种数据操作方法，如 remove、batch、sort、unique 等方法，下面我们来一一介绍。
3.4.1 remove 方法
通过 remove 方法，我们可以从缓存池中删除指定键名的数据：
--------------------- -------
这样，键名为 [ 'name', 'age' ] 的数据将从缓存池中被删除。
3.4.2 batch 方法
通过 batch 方法，我们可以批量添加数据：
-------------
------------- --------- ------- ----------------
------------- --------- ------ ----------------
------------- --------- ------------- ------------
--这样，就可以批量添加三条数据。
3.4.3 sort 方法
通过 sort 方法，我们可以对缓存池中的数据进行排序：
-- - --- ------ -------------- -- -- ----------- - ------------
3.4.4 unique 方法
通过 unique 方法，我们可以对缓存池中的数据进行去重：
------------------ ---- --------- --------- -- -
------ -------------------- ------ -- ---- --- ---------------
--这样，缓存池中的数据就会去重。
3.5 缓存池的边界处理
在 flru 中，当缓存池达到预设的容量上限时，将自动淘汰最久未被访问的数据。
----- ----- - --- ------- ---------------- ---- ---------------- ---- ---------------- ---- ----------------------------- -- --------- ----------------------------- -- --- ----------------------------- -- ---
在创建缓存池时，还可以指定 onEviction 回调函数进行边界处理：
----- ----- - --- ------- ------------- ------ -
--------------------- -------- --- ---------
--可以看出，当缓存池达到容量上限时，会批量删除一些不需要的数据，并将其打印出来。
4. 总结
今天我们介绍了 flru 这个 npm 包的使用方法，学习了 flru 中缓存池的基本操作，包括添加数据、读取数据、批量添加数据、排序、去重等操作，同时也详细介绍了 flru 算法的优点与使用技巧，希望这篇文章能够对您的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006735c890c4f7277583fc0