用 Set 实现关键词历史记录过滤，核心是利用其自动去重和 O(1) 查找特性；支持增量添加、存在性判断、转数组后前缀匹配与截取，需手动处理序列化及有序需求。
用 JavaScript 的 Set 实现关键词历史记录过滤，核心是利用其自动去重和快速查找的特性，避免重复记录、支持增量更新，并能高效判断某关键词是否已存在。
用 Set 存储并去重历史关键词
每次用户输入新关键词后，直接添加进 Set，它会自动忽略重复项，无需手动判断：
-
const history = new Set();初始化一个空集合 -
history.add('react');添加关键词，重复调用不会产生冗余 -
history.has('vue');快速判断是否已存在（时间复杂度 O(1)）
结合输入框实时过滤已有记录
当用户在搜索框中输入时，可从 Set 中提取所有关键词，再按需筛选（如前缀匹配），避免每次都遍历数组：
- 把
Set转为数组：[...history]或Array.from(history) - 用
filter做模糊或前缀匹配：[...history].filter(k => k.startsWith(inputValue)) - 若需限制数量（如只显示最近 5 条），可用
.slice(-5)取末尾项（注意 Set 本身无序，建议配合时间戳或数组维护顺序）
持久化时注意序列化兼容性
Set 不能直接 JSON 序列化，存入 localStorage 前需转成数组：
立即学习“Java免费学习笔记（深入）”；
- 保存：
localStorage.setItem('searchHistory', JSON.stringify([...history])) - 读取：
const saved = JSON.parse(localStorage.getItem('searchHistory') || '[]');
再重建：const history = new Set(saved); - 若关键词含特殊字符或需要排序，可在转换前后做清洗或排序处理
扩展：带时间戳的有序历史（可选增强）
Set 本身不记录顺序，如需“最近使用优先”，可搭配 Map 或额外数组：
- 用
Map存键值对：new Map().set(keyword, Date.now()) - 或维护一个数组记录顺序，同时用
Set辅助去重：if (!history.has(k)) { history.add(k); list.push(k); } - 展示时对
list去重并截取，兼顾顺序与性能
不复杂但容易忽略的是：Set 只解决去重和存在性判断，排序、分页、模糊匹配等逻辑仍需配合数组方法完成。合理分工，才能既轻量又实用。
