javascript数组去重没有绝对最佳方法，只有最适合当前情境的方案，核心是通过机制判断元素唯一性并构建新数组；针对基本数据类型，set因简洁性和o(n)时间复杂度成为首选，代码可读且性能优异；对于对象数组，因set仅比较引用地址，需使用reduce结合map或普通对象，利用唯一属性（如id）作为键来保证逻辑去重，其中map能保持插入顺序且键类型更灵活；性能方面，小规模数组可忽略差异，中大规模下set处理基本类型最优，对象数组则推荐map或对象方案避免o(n²)的filter+indexof方法，确保高效去重并维持代码清晰。
JavaScript数组去重，这在前端开发里简直是老生常谈了，但说实话，它远不止一个
Set那么简单。不同的场景、不同的数据类型，甚至是不同的性能要求，都会让我们在选择去重方案时有那么一点点“纠结”。在我看来，没有绝对的“最佳”方法，只有“最适合”当前情境的方案。核心无非是利用某种机制来判断元素的唯一性，然后构建一个新的、不含重复元素的数组。
解决方案
谈到去重，我们手头可用的工具其实挺多的，从ES6的新特性到一些传统迭代方法，各有千秋。
1. 利用 Set
对象
这是最简洁、最现代的方法，尤其是处理基本数据类型（数字、字符串、布尔值、
undefined、
null）时。
Set集合本身就只存储唯一的值。
const numbers = [1, 2, 2, 3, 4, 4, 5]; const uniqueNumbers = [...new Set(numbers)]; console.log(uniqueNumbers); // [1, 2, 3, 4, 5] const strings = ['apple', 'banana', 'apple', 'orange']; const uniqueStrings = Array.from(new Set(strings)); console.log(uniqueStrings); // ['apple', 'banana', 'orange']
2. 使用 filter
结合 indexOf
或 includes
这是一种非常经典的迭代方法，思路是遍历数组，只保留第一次出现的元素。
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((item, index, self) => {
return self.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]
// 或者用 includes，逻辑类似
const uniqueArrIncludes = arr.filter((item, index, self) => {
return index === 0 || !self.slice(0, index).includes(item);
});
console.log(uniqueArrIncludes); // [1, 2, 3, 4, 5]indexOf的方式更常见，它检查当前元素在数组中第一次出现的位置是否就是当前索引。如果不是，说明之前已经出现过了。
3. 利用 reduce
结合 Map
或普通对象
这种方法在处理对象数组去重时非常有用，因为它允许你根据对象的某个特定属性来判断唯一性，而不是对象引用本身。
// 使用 Map
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' }, // 重复
{ id: 3, name: 'Charlie' }
];
const uniqueUsersMap = Array.from(
users.reduce((map, user) => {
if (!map.has(user.id)) {
map.set(user.id, user);
}
return map;
}, new Map()).values()
);
console.log(uniqueUsersMap);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/
// 使用普通对象
const uniqueUsersObj = Object.values(
users.reduce((acc, user) => {
acc[user.id] = user; // 后面出现的会覆盖前面同id的
return acc;
}, {})
);
console.log(uniqueUsersObj);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/reduce配合
Map的方式能够保持原始元素的顺序，而普通对象因为键值对无序，可能无法保证原始顺序。
为什么Set是现代JavaScript去重的首选？
我个人觉得，
Set之所以能成为现代JavaScript去重中的“明星”，主要是因为它实在太简洁了。一行代码就能搞定，这对于日常开发来说，效率提升是显而易见的。它的设计初衷就是为了存储不重复的值，所以用它来去重简直是顺理成章。
首先，代码可读性极高。
new Set(arr)这种写法，一眼就能看出它的意图，不需要额外的逻辑判断。然后
...扩展运算符或者
Array.from()又能很方便地把它转回数组。这比写一个
filter加上
indexOf的回调函数要直观得多。
其次，性能表现优秀。对于基本数据类型，
Set的内部实现通常是哈希表，这意味着添加和检查元素是否存在的时间复杂度接近
O(1)。所以，即使是处理大规模的基本类型数组，
Set的表现也相当出色，远超
O(n^2)的
indexOf方案。当然，这只是针对基本类型，后面我们会聊到对象。
不过，
Set也有它的局限性。它判断值是否重复是基于“值相等”的原则。对于基本类型，这没问题。但对于对象，
Set判断的是对象的引用地址。也就是说，两个内容完全相同的不同对象，在
Set看来也是两个不同的元素。
const objArr = [{a:1}, {a:2}, {a:1}];
const uniqueObjArr = [...new Set(objArr)];
console.log(uniqueObjArr); // [{a:1}, {a:2}, {a:1}] - 并没有去重，因为它们是不同的引用所以，如果你的数组里全是基本类型，或者你根本不关心对象去重的问题，那么
Set绝对是你的首选。
处理复杂对象数组去重时，有哪些实用技巧？
在实际项目里，我们经常会遇到数组里装的是一个个对象的情况，比如用户列表、商品信息等等。这时候，
Set就不那么给力了，因为它只认对象的内存地址。我们需要的，往往是根据对象内部的某个或某几个属性来判断“唯一性”。
这里，
Map对象或者一个普通的 JavaScript 对象就能派上大用场了。它们的核心思路都是利用键值对的唯一性。
技巧一：利用 Map
对象存储唯一标识
Map比普通对象更强大的一点是它的键可以是任何类型，而且能保持插入顺序。我们可以遍历对象数组，然后用每个对象的唯一ID（或者你认为可以代表其唯一性的属性组合）作为
Map的键，对象本身作为值。
const products = [
{ id: 'p001', name: 'Laptop', price: 1200 },
{ id: 'p002', name: 'Mouse', price: 25 },
{ id: 'p001', name: 'Laptop', price: 1250 }, // id重复，但价格不同
{ id: 'p003', name: 'Keyboard', price: 75 }
];
const uniqueProducts = Array.from(
products.reduce((map, product) => {
// 关键：用id作为Map的key，Map会自动处理key的唯一性
// 如果key已存在，新的值会覆盖旧的值。这里我们只在key不存在时才添加
if (!map.has(product.id)) {
map.set(product.id, product);
}
return map;
}, new Map()).values()
);
console.log(uniqueProducts);
/*
[
{ id: 'p001', name: 'Laptop', price: 1200 }, // 注意这里保留的是第一次出现的p001
{ id: 'p002', name: 'Mouse', price: 25 },
{ id: 'p003', name: 'Keyboard', price: 75 }
]
*/如果想保留后面出现的重复项，只需将
if (!map.has(product.id))判断移除即可，
map.set(product.id, product)会自动覆盖。
技巧二：利用普通对象属性作为唯一标识
这和
Map的思路很像，只是用普通对象的属性来做键。但要注意，普通对象的键只能是字符串或 Symbol。
const articles = [
{ slug: 'js-dedupe', title: 'JS去重', author: 'Leo' },
{ slug: 'react-hooks', title: 'React Hooks', author: 'Anna' },
{ slug: 'js-dedupe', title: 'JS去重进阶', author: 'Leo' } // slug重复
];
const uniqueArticles = Object.values(
articles.reduce((acc, article) => {
// 利用slug作为键，后面的同slug会覆盖前面的
acc[article.slug] = article;
return acc;
}, {})
);
console.log(uniqueArticles);
/*
[
{ slug: 'js-dedupe', title: 'JS去重进阶', author: 'Leo' }, // 保留了后面出现的
{ slug: 'react-hooks', title: 'React Hooks', author: 'Anna' }
]
*/这种方法简洁，但有个小问题：它会保留最后一个出现的重复项。如果你需要保留第一个，那还是
Map配合
if (!map.has(key))更灵活。另外，普通对象无法保证键的顺序，所以结果数组的顺序可能与原始数组不同。
性能考量：在大量数据面前，如何选择最合适的去重方法？
当我们面对的数组规模达到几万、几十万甚至上百万时，性能就不是一个可以忽略的问题了。这时，选择一个合适的去重方法，可能直接决定了你的页面会不会卡顿，或者后端接口会不会超时。
在我看来，性能上的选择，主要看两个方面：数据类型和算法复杂度。
-
基本数据类型（数字、字符串等）
-
Set
方法：这是毫无疑问的王者。它的内部实现通常是哈希表，平均时间复杂度接近O(n)
。这意味着无论数组多大，它都能以非常高的效率完成去重。对于大规模基本类型数组，这是我的首选。 -
filter
+indexOf
：这个方法在小规模数组时看起来很优雅，但它的时间复杂度是O(n^2)
。因为indexOf
在每次迭代时都要遍历数组的一部分。想象一下，一个10万元素的数组，100000 * 100000
是一个天文数字。所以，对于大数据量，坚决避免这种方式。
-
-
复杂对象数组
-
Map
或Object
结合reduce
：这些方法的平均时间复杂度是O(n)
。它们通过一个哈希结构（Map
或普通对象）来存储已经处理过的唯一键，每次查找和插入都是常数时间。这使得它们在处理大规模对象数组时表现出色。Map
在键值是对象或需要保持插入顺序时更优。- 普通对象在键是字符串且对顺序不敏感时，也能提供类似性能，但要注意键名冲突的风险（例如，
'1'
和1
在对象键中都是字符串'1'
）。
-
一个不那么严谨的总结：
-
小规模数组（几百以内）：其实怎么去重都行，可读性、代码简洁度优先。
Set
依然是首选，filter + indexOf
也无伤大雅。 -
中等规模数组（几千到几万）：
- 基本类型：
Set
独领风骚。 - 对象数组：
Map
或Object
方案。
- 基本类型：
-
大规模数组（几万以上）：
- 基本类型：
Set
是唯一且最佳选择。 - 对象数组：
Map
或Object
方案，确保你的唯一键生成逻辑是高效的。
- 基本类型：
最后，一个小的提醒：在实际项目中，如果去重逻辑特别复杂，或者性能要求极高，可以考虑对数据进行预处理，或者利用Web Worker来避免阻塞主线程。但对于大多数前端去重场景，上述方法已经足够应对了。
