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️⃣ 对象数组去重(根据某个属性)
如果数组元素是对象,可以用 Map
或 Set
结合属性值去重。
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');
✅ 优点:代码简洁,功能丰富
⚠️ 需要额外依赖库
💡 总结建议:
类型 | 推荐方法 |
---|---|
一维基本类型 | Set 或 filter |
大数组基本类型 | Map/对象 |
对象数组 | Map + key 或 lodash uniqBy |
复杂去重逻辑 | reduce |