数组去重的核心是提取唯一元素并保持顺序，常用方法包括Set、filter结合indexOf、reduce及哈希表。Set性能最优且代码简洁，适合基本类型；对象去重推荐基于唯一属性（如id）使用Map或Set记录已见值；复杂逻辑可用自定义比较函数配合findIndex或reduce。性能上，Set和哈希表为O(n)，优于filter+indexOf的O(n²)。选择时需权衡数据类型、规模、兼容性、可读性及是否需保持顺序，无统一最优方案，应依场景而定。
JavaScript数组去重，说白了就是从一个数组里找出那些独一无二的元素，然后把它们重新组合成一个新的数组。这事儿在前端开发里挺常见的，比如处理后端返回的重复数据，或者用户输入时进行校验。实现方法有很多种，各有各的脾气和适用场景，没有哪个是绝对的“最好”，只有最适合你当前需求的那一个。
解决方案
在我看来，处理数组去重，我们手里有几把趁手的工具，从简洁优雅到灵活强大，都能找到对应的方案。
利用Set对象
这是ES6引入的一个非常简洁且高效的方法。Set 对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。它的去重能力是内置的，用起来特别顺手。
立即学习“Java免费学习笔记（深入）”；
const originalArray = [1, 2, 2, 3, 'a', 'a', undefined, undefined, null, null, {}, {}];// 最直接的方式const uniqueArrayBySet = [...new Set(originalArray)];console.log(uniqueArrayBySet);// 输出: [1, 2, 3, "a", undefined, null, {}, {}]// 注意：对于对象字面量 {}，Set会把它们当作不同的引用，所以会保留两个。
我个人非常喜欢Set，因为它代码量少，意图明确，而且在现代浏览器里性能也相当不错。但要注意，它默认是基于值和引用的唯一性判断，对于 {} 这种对象字面量，即使内容一样，只要引用不同，Set 也会认为它们是不同的。
使用filter()和indexOf()
这是在ES6之前比较常见的一种做法，理解起来也很直观。filter()方法会创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。indexOf()则返回数组中第一个匹配元素的索引。
const originalArray = [1, 2, 2, 3, 'a', 'a', undefined, undefined, null, null];const uniqueArrayByFilter = originalArray.filter((item, index, self) => { // 如果当前元素的第一个出现位置的索引等于它当前的索引， // 说明它是第一次出现，也就是唯一的。 return self.indexOf(item) === index;});console.log(uniqueArrayByFilter);// 输出: [1, 2, 3, "a", undefined, null]
这种方法虽然不如Set那么简洁，但它的兼容性更好，几乎所有浏览器都支持。它的原理是，对于重复的元素，indexOf总是返回它第一次出现的索引，而不是当前迭代的索引，所以filter就会把它过滤掉。
通过reduce()方法
reduce()是一个非常强大的数组方法，它可以遍历数组并累积一个单一的结果。我们也可以用它来构建一个去重后的新数组。
const originalArray = [1, 2, 2, 3, 'a', 'a', undefined, undefined, null, null];const uniqueArrayByReduce = originalArray.reduce((accumulator, current) => { // 如果累加器中还没有当前元素，就把它加进去 if (!accumulator.includes(current)) { accumulator.push(current); } return accumulator;}, []); // 初始值是一个空数组console.log(uniqueArrayByReduce);// 输出: [1, 2, 3, "a", undefined, null]
reduce()的这种用法，我觉得挺能体现函数式编程思想的。它通过不断地“折叠”数组，最终得到我们想要的结果。缺点嘛，就是代码可能看起来没那么直观，特别是对于刚接触reduce的开发者来说。
利用Map对象或普通对象作为哈希表
这种方法尤其适用于去重那些包含对象的数组，或者当你需要基于某个特定属性去重时。
const originalArray = [1, 2, 2, 3, 'a', 'a', undefined, undefined, null, null];const seen = {}; // 用一个对象来记录已经出现过的元素const uniqueArrayByHash = originalArray.filter(item => { // 将item转换为字符串作为key，避免对象引用问题 const key = typeof item === 'object' && item !== null ? JSON.stringify(item) : item; if (!seen[key]) { seen[key] = true; return true; } return false;});console.log(uniqueArrayByHash);// 输出: [1, 2, 3, "a", undefined, null]
用哈希表的方式，你可以灵活地定义“唯一”的标准。比如，如果你有一堆用户对象，你想根据id属性去重，那就可以把item.id作为seen对象的key。
哪种JavaScript数组去重方法在性能上表现最好？
说到性能，这总是绕不开的话题，尤其是在处理大量数据时。在我做过的项目中，性能考量确实会影响方法的选择。
通常情况下，Set方法在现代JavaScript引擎中表现最为出色。这是因为Set的底层实现通常是基于哈希表（hash table），查找、插入和删除操作的平均时间复杂度接近O(1)。这意味着无论数组有多大，Set去重的效率都非常高。它利用了引擎的C++原生优化，这通常是JavaScript代码无法比拟的。
相比之下，filter()结合indexOf()的方法，它的性能在数组规模较大时会显著下降。indexOf()本身在数组中查找元素的时间复杂度是O(n)，而filter()又会遍历整个数组，所以整体的时间复杂度是O(n²)。想象一下，一个10000个元素的数组，indexOf可能要执行10000次，每次又要遍历10000个元素，这开销可就大了。
reduce()方法结合includes()去重，其性能表现与filter + indexOf类似，因为includes()也是O(n)操作，整体也是O(n²)。如果reduce内部使用哈希表（比如我们上面用普通对象seen），那么性能就能提升到接近O(n)。
而使用Map或普通对象作为哈希表的方法，性能通常也非常好，接近O(n)。它避免了嵌套循环，通过空间换时间的方式，将查找操作的复杂度降低。
所以，如果你的目标环境支持ES6，并且对性能有较高要求，Set无疑是首选。对于那些需要自定义去重逻辑（比如对象去重）的场景，基于Map或普通对象的哈希表方法会更灵活，且性能也足够优秀。当然，对于小型数组（比如几十个元素），这些性能差异几乎可以忽略不计，这时候选择你觉得代码最清晰、最容易维护的方法就行。
如何处理包含对象的数组去重，而不仅仅是基本类型？
去重基本类型（数字、字符串、布尔值等）相对简单，Set、indexOf都能搞定。但如果数组里装的是对象，事情就变得有点意思了。因为JavaScript在比较对象时，默认是比较它们的引用地址，而不是它们的内容。这意味着，即使两个对象拥有完全相同的属性和值，如果它们是不同的内存地址，JS也会认为它们是不同的。
1. 基于特定属性去重（最常用）
在实际项目中，我们经常需要根据对象的某个唯一标识符（比如id、sku等）来判断对象是否重复。
const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Alicia' }, // id重复 { id: 3, name: 'Charlie' }, { id: 2, name: 'Bobby' } // id重复];const uniqueUsers = [];const seenIds = new Set(); // 使用Set来存储已见的IDfor (const user of users) { if (!seenIds.has(user.id)) { uniqueUsers.push(user); seenIds.add(user.id); }}console.log(uniqueUsers);/*输出:[ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]*/
这种方法非常实用且高效。它遍历一次数组，用Set来快速检查id是否已存在。你也可以用reduce结合哈希表实现类似逻辑：
const uniqueUsersByReduce = users.reduce((acc, current) => { if (!acc.seenIds.has(current.id)) { acc.result.push(current); acc.seenIds.add(current.id); } return acc;}, { seenIds: new Set(), result: [] }).result;console.log(uniqueUsersByReduce);
2. 将对象序列化后去重（适用于简单对象，但有局限性）
如果你想比较两个对象的“内容”是否完全一致（即所有属性和值都相同），可以尝试将对象转换为字符串（JSON格式），然后用Set或哈希表去重。
const items = [ { type: 'book', price: 20 }, { type: 'pen', price: 5 }, { type: 'book', price: 20 }, // 内容重复 { type: 'pencil', price: 5 }];const uniqueItems = [];const seenStrings = new Set();for (const item of items) { const itemString = JSON.stringify(item); // 转换为字符串 if (!seenStrings.has(itemString)) { uniqueItems.push(item); seenStrings.add(itemString); }}console.log(uniqueItems);/*输出:[ { type: 'book', price: 20 }, { type: 'pen', price: 5 }, { type: 'pencil', price: 5 }]*/
这种方法有个明显的缺点：JSON.stringify()对对象属性的顺序敏感。也就是说，{ a: 1, b: 2 }和{ b: 2, a: 1 }会被认为是不同的字符串。此外，它不能处理包含函数、undefined或循环引用的对象。所以，它只适用于结构简单且属性顺序固定的对象。
3. 自定义比较函数（更灵活，但更复杂）
如果你的对象比较逻辑很复杂，或者需要比较多个属性，那么你可能需要编写一个自定义的比较函数，并结合filter或reduce来使用。
const products = [ { name: 'Laptop', brand: 'Dell', price: 1200 }, { name: 'Mouse', brand: 'Logitech', price: 50 }, { name: 'Laptop', brand: 'Dell', price: 1250 }, // name和brand重复，但price不同 { name: 'Keyboard', brand: 'Logitech', price: 100 }];const uniqueProducts = products.filter((product, index, self) => { // 检查这个产品是否是第一次出现，根据name和brand判断 return index === self.findIndex(p => p.name === product.name && p.brand === product.brand);});console.log(uniqueProducts);/*输出:[ { name: 'Laptop', brand: 'Dell', price: 1200 }, { name: 'Mouse', brand: 'Logitech', price: 50 }, { name: 'Keyboard', brand: 'Logitech', price: 100 }]*/
findIndex会在数组中找到第一个符合条件的元素的索引。如果当前元素的索引与findIndex找到的索引相同，就说明它是第一次出现。这种方式非常灵活，可以根据你的具体需求定义任何复杂的比较逻辑。
在实际项目中，选择数组去重方法时需要考虑哪些因素？
在真实的项目里，选择哪种去重方法，我觉得这真不是一道单选题，而是要综合考虑多方面因素。
1. 数据规模和性能要求
这是最直接的考量。如果你的数组元素数量不多（比如几十、几百个），那么大多数方法在性能上的差异几乎可以忽略不计。这时候，代码的可读性和简洁性可能更重要。但如果处理的是成千上万，甚至几十万的数据，那么性能就成了决定性因素。Set或基于哈希表的方案（如Map或普通对象）会是更明智的选择，它们的时间复杂度接近O(n)，而indexOf结合filter的O(n²)方案，在这种情况下可能会导致页面卡顿甚至崩溃。
2. 数组中元素的类型
这会极大地影响你的选择。
基本类型（字符串、数字、布尔值、null、undefined）：Set是最简洁、高效的选择。filter + indexOf也完全没问题。对象类型：这是最复杂的情况。如果你能根据对象的某个唯一标识属性（如id）去重，那么使用Set来存储已见的id值，然后遍历数组构建新数组，是最推荐的做法。如果你需要比较整个对象的内容，并且对象结构简单、不含函数或循环引用，可以考虑JSON.stringify()后去重，但要小心属性顺序问题。如果需要复杂的自定义比较逻辑，filter结合findIndex或reduce结合自定义比较函数会更合适。
3. 代码可读性和维护性
代码是给人看的，不是给机器看的。
Set方案无疑是最简洁、最易读的，它的意图非常明确：“给我一堆东西，我只给你独一无二的。”filter + indexOf对于熟悉数组方法的开发者来说也很好理解。reduce方法虽然强大，但如果滥用或写得过于复杂，可能会降低代码的可读性，让后来的维护者头疼。
4. 浏览器兼容性
虽然现在大多数现代浏览器对ES6特性支持良好，但在一些老旧项目或特定环境下，你可能需要考虑兼容性问题。Set、Map等是ES6特性，如果目标环境不支持，你就得考虑使用Babel进行转译，或者退而求其次，选择filter + indexOf或基于普通对象的哈希表方案。
5. 是否需要保持原始顺序
Set在大多数现代JS引擎中会保持元素的插入顺序，但这不是规范强制要求的，所以理论上不能完全依赖。如果严格要求去重后的数组保持原始元素的相对顺序，那么filter + indexOf、reduce或基于哈希表的方案（按遍历顺序添加）会更稳妥。
6. 团队或项目编码规范
最后，也要考虑你所在的团队或项目的编码规范。如果团队有偏好的去重方式，或者某种函数式编程风格，那么遵循这些规范可以保持代码库的一致性。
总之，没有银弹。深入理解每种方法的优缺点，结合实际场景的需求，才能做出最合适的选择。我通常会优先考虑Set，如果遇到对象去重，再考虑基于ID的哈希表方案，或者万不得已才去写复杂的自定义比较。
以上就是怎么利用JavaScript实现数组去重的多种方法？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524564.html
微信扫一扫 
支付宝扫一扫 
