js数组去重的方法

1️⃣ 使用 Set

最简单直接的方法,适合一维数组基本类型(字符串、数字)。

ts 复制代码
1.  // 1.利用set去重
1.  // Set是es6新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合
1.  // Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组,也是ES6的新增方法
const arr = [1, 2, 2, 3, 3, 4];
const uniqueArr = Array.from(new Set(arr));
// 或者
const uniqueArr2 = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4]

✅ 优点:简洁、性能好

⚠️ 缺点:只适合原始类型,如果是对象需要特殊处理。

2️⃣ 使用 filter + indexOf

利用数组的 filter 过滤重复项。

ts 复制代码
const arr = [1, 2, 2, 3, 3, 4];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4]

✅ 优点:不依赖 ES6

⚠️ 缺点:indexOf 每次遍历数组,性能比 Set 差。

3️⃣ 使用对象/Map 记录出现过的值

适合大数组 ,性能比 filter + indexOf 好。

ts 复制代码
//map数据结构是es6中新出的语法,其本质也是键值对,只是其键不局限于普通对象的字符串
const arr = [1, 2, 2, 3, 3, 4];

//对象去重
const seen: Record<number, boolean> = {};
const uniqueArr = arr.filter(item => {
  if (seen[item]) return false;
  seen[item] = true;
  return true;
});
console.log(uniqueArr); // [1, 2, 3, 4]

//map去重
const seen = new Map<number, boolean>();
const uniqueArr = arr.filter(item => {
  if (seen.has(item)) return false; // 如果已经存在,过滤掉
  seen.set(item, true);             // 记录该值出现过
  return true;                      // 第一次出现的值保留
});

console.log(uniqueArr); // [1, 2, 3, 4]

✅ 优点:适合大数组

⚠️ 缺点:只适合基本类型(数字、字符串),对象就需要自定义 key。

4️⃣ 使用 reduce

利用 reduce 聚合唯一值。

ts 复制代码
const arr = [1, 2, 2, 3, 3, 4];
const uniqueArr = arr.reduce((acc, cur) => {
  if (!acc.includes(cur)) acc.push(cur);
  return acc;
}, [] as number[]);
console.log(uniqueArr); // [1, 2, 3, 4]

✅ 优点:灵活,可用于对象

⚠️ 缺点:数组大时性能不如 Set

5️⃣ 对象数组去重(根据某个属性)

如果数组元素是对象,可以用 MapSet 结合属性值去重。

ts 复制代码
const arr = [
  { id: 1, name: '苹果' },
  { id: 2, name: '苹果' },
  { id: 3, name: '香蕉' },
];

// 根据 name 去重
const uniqueArr = Array.from(new Map(arr.map(item => [item.name, item])).values());
console.log(uniqueArr);
// [{ id: 2, name: '苹果' }, { id: 3, name: '香蕉' }]

✅ 优点:适合对象数组,保留对象结构

⚠️ 缺点:需要选择合适的属性作为 key

6️⃣ Lodash 等库函数

如果项目中有 lodash,可以直接用 _.uniq_.uniqBy

ts 复制代码
import _ from 'lodash';

const arr = [1, 2, 2, 3, 3, 4];
const uniqueArr = _.uniq(arr);

const arrObj = [
  { id: 1, name: '苹果' },
  { id: 2, name: '苹果' }
];
const uniqueArrObj = _.uniqBy(arrObj, 'name');

✅ 优点:代码简洁,功能丰富

⚠️ 需要额外依赖库

💡 总结建议

类型 推荐方法
一维基本类型 Setfilter
大数组基本类型 Map/对象
对象数组 Map + keylodash uniqBy
复杂去重逻辑 reduce
相关推荐
糖墨夕12 分钟前
第一章:为什么你要学 AI Agent?—— 从"切图仔"到全栈的进化之路
前端·javascript·vue.js
自律懒人27 分钟前
ChatGPT Work 上线当天实测:GPT-5.6 Sol 把 Codex 塞进桌面应用,跨应用自动做报表和 PPT,一个指令干 3 小时的活
javascript·开源
不听话坏10 小时前
Ignition篇(下 一) 动态执行前的事情
开发语言·前端·javascript
怕浪猫10 小时前
现在的"AI 原生应用"热潮,恰恰证明了大多数产品需求本身就是个草台班子
面试
小二·11 小时前
React 19 + Next.js 15 现代前端开发实战:App Router / Server Components / 流式渲染
前端·javascript·react.js
CHNE_TAO_EMSM13 小时前
Android studio 打开文件时自动下载源码
前端·javascript·android studio
TPBoreas13 小时前
MySQL性能优化面试全攻略
mysql·面试·性能优化
竹林81815 小时前
从 ethers.js 迁移到 Viem:一个签名验证 Bug 让我彻底放弃旧爱
javascript
你挚爱的强哥15 小时前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
半个落月16 小时前
用 LangChain.js 手写一个能读写文件和执行命令的 Mini Cursor
javascript·人工智能·后端