一些js数组去重的实现算法

  1. 双重循环法(最传统,理解简单)
javascript 复制代码
function unique(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    var flag = true;
    for (var j = 0; j < result.length; j++) {
      if (arr[i] === result[j]) {
        flag = false;
        break;
      }
    }
    if (flag) {
      result.push(arr[i]);
    }
  }
  return result;
}

var arr = [1, 2, 3, 2, 1];
console.log(unique(arr)); // [1, 2, 3]

原理

  • 外层遍历原数组每个元素,
  • 内层遍历结果数组检查是否已存在,
  • 没有就加入结果。

缺点:时间复杂度 O(n²),数组越大越慢。

  1. 利用 indexOf 去重(兼容 ES5)
javascript 复制代码
function unique(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    if (result.indexOf(arr[i]) === -1) {
      result.push(arr[i]);
    }
  }
  return result;
}

var arr = [1, 2, 3, 2, 1];
console.log(unique(arr)); // [1, 2, 3]

同样时间复杂度 O(n²),但代码更简洁。

  1. 利用对象做哈希表(更快的实现)
javascript 复制代码
function unique(arr) {
  var result = [];
  var seen = {};
  for (var i = 0; i < arr.length; i++) {
    if (!seen[arr[i]]) {
      result.push(arr[i]);
      seen[arr[i]] = true;
    }
  }
  return result;
}

var arr = [1, 2, 3, 2, 1];
console.log(unique(arr)); // [1, 2, 3]

注意

  • 这种方法对数字和字符串效果很好,时间复杂度接近 O(n)。
  • 对于对象或数组类型的元素,会转成字符串 object Object,可能会出错。
  1. 使用 forEach 结合 indexOf(兼容 ES5)
javascript 复制代码
function unique(arr) {
  var result = [];
  arr.forEach(function(item) {
    if (result.indexOf(item) === -1) {
      result.push(item);
    }
  });
  return result;
}

var arr = [1, 2, 3, 2, 1];
console.log(unique(arr)); // [1, 2, 3]

简单的 ES6 写法:

  1. 使用 Set(推荐)
javascript 复制代码
let arr = [1, 2, 3, 2, 1];
let result = [...new Set(arr)];
console.log(result); // [1, 2, 3]

原理

  • Set 是一种集合结构,自动去掉重复值。... 展开运算符可以把它再变回数组。
  • 优点:简洁、可读性高
  • 缺点:不支持对象深度去重(引用类型的比较是地址)
  1. 使用 filter + indexOf
javascript 复制代码
let arr = [1, 2, 3, 2, 1];
let result = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(result); // [1, 2, 3]

原理

  • indexOf 会返回首次出现的索引,只有首次出现的位置和当前索引一致时才保留。
  • 缺点:每次 filter 内部都要遍历一次(O(n²))
  1. 使用 reduce + includes
javascript 复制代码
let arr = [1, 2, 3, 2, 1];
let result = arr.reduce((acc, cur) => {
  if (!acc.includes(cur)) acc.push(cur);
  return acc;
}, []);
console.log(result); // [1, 2, 3]

原理

  • reduce 逐个累加,includes 检查是否已存在。
  • 缺点:同样是 O(n²) 复杂度。
  1. 基于哈希表的去重(高效版)
javascript 复制代码
let arr = [1, 2, 3, 2, 1];
let seen = {};
let result = arr.filter(item => {
  if (!seen[item]) {
    seen[item] = true;
    return true;
  }
  return false;
});
console.log(result); // [1, 2, 3]

原理

  • 利用对象键的唯一性,O(n) 时间就能完成去重。
  • 优点:比 indexOf / includes 高效
  • 缺点:对象键会自动转成字符串({} 和 "object Object" 都会冲突),处理对象数组时要加序列化。
  1. 去重并排序
javascript 复制代码
let arr = [3, 1, 2, 3, 2, 1];
let result = [...new Set(arr)].sort((a, b) => a - b);
console.log(result); // [1, 2, 3]
  1. 对象数组去重(按某个字段)

假设有:

javascript 复制代码
let arr = [
  { id: 1, name: "A" },
  { id: 2, name: "B" },
  { id: 1, name: "C" }
];

按 id 去重:

javascript 复制代码
let seen = new Set();
let result = arr.filter(item => !seen.has(item.id) && seen.add(item.id));
console.log(result);
// [ { id: 1, name: "A" }, { id: 2, name: "B" } ]
相关推荐
Csvn6 小时前
`??` 和 `||` 搞混,线上用户头像全挂了
前端
kyriewen6 小时前
白宫前脚下了限制令,OpenAI 后脚就把 GPT-5.6 发了
前端·gpt·openai
用户40269244819087 小时前
CRMEB Pro 新增后台接口全链路:路由、权限、验证器、返回格式一次讲清
前端·后端
泉城老铁8 小时前
springboot+vue+ ffmpeg 实现视频的拉流播放
前端
PedroQue998 小时前
uni-router v1.8.0新增冷启动守卫补执行
前端·uni-app
xiaok8 小时前
部署之后,本地浏览器还在读取旧缓存导致页面一直显示loading中
前端
用户059540174468 小时前
Redis缓存一致性踩坑实录:线上故障排查6小时,我用pytest+内存快照把它永久关进了笼子
前端·css
星栈8 小时前
我用 Rust + Dioxus 做了个全栈跨平台笔记应用:第一版先把列表和详情跑通
前端·rust·前端框架
用户1733598075379 小时前
Vue 3 SPA 首屏优化:从 3s 到 1.2s 的 5 个实践
前端·vue.js
咖啡无伴侣9 小时前
基础骨架:30 分钟搭好 pnpm workspace,完成双项目 Monorepo 迁入
前端