JavaScript 数组去重怎么过滤历史搜索记录重复词-js教程-PHP中文网

用 set 转换最简洁，保留首次出现顺序，适合过滤历史搜索词中的重复项；手动遍历+includes兼容老环境且可忽略大小写；结合 localstorage 时需解析字符串、限制条数并预处理空格和空字符串。

javascript 数组去重怎么过滤历史搜索记录重复词

直接用 Set 转换最简洁，保留首次出现顺序，适合过滤历史搜索词中的重复项。

用 Set 去重（推荐）

现代 JavaScript 中，Set 天然去重且保持插入顺序，配合扩展运算符即可一行搞定：

const history = ['苹果', '香蕉', '苹果', '橙子', '香蕉'];
const uniqueHistory = [...new Set(history)];
// → ['苹果', '香蕉', '橙子']

这是最常用、性能好、语义清晰的方式，尤其适合用户主动输入的搜索词——重复词通常集中在连续操作中，Set 会自动保留第一次输入的记录。

手动遍历 + includes（兼容老环境）

如果需支持 IE 或需要更精细控制（比如忽略大小写），可用传统循环：

新建空数组 result
遍历原数组，用 !result.includes(item) 判断是否已存在
不存在则 push 进去

示例（忽略大小写去重）：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

const history = ['Apple', 'banana', 'apple', 'Orange'];
const uniqueHistory = [];
history.forEach(item => {
  const lower = item.toLowerCase();
  if (!uniqueHistory.some(x => x.toLowerCase() === lower)) {
    uniqueHistory.push(item); // 保留原始大小写
  }
});
// → ['Apple', 'banana', 'Orange']

结合 localStorage 的实际使用场景

历史搜索词常存于 localStorage，读取后是字符串，需先解析再处理：

// 读取并去重后保存
const saved = localStorage.getItem('searchHistory');
const history = saved ? JSON.parse(saved) : [];
const unique = [...new Set(history)];

// 更新存储（可选：限制最多 10 条）
localStorage.setItem('searchHistory', JSON.stringify(unique.slice(-10)));

注意：每次新增搜索词时，建议先 unshift 再去重，保证最新词在最前；或去重后用 sort 按时间戳排序（若数据含时间字段）。