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
或普通对象这种方法在处理对象数组去重时非常有用，因为它允许你根据对象的某个特定属性来判断唯一性，而不是对象引用本身。
// 使用 Mapconst 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来避免阻塞主线程。但对于大多数前端去重场景，上述方法已经足够应对了。
以上就是JS数组去重有哪些方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514918.html
微信扫一扫 
支付宝扫一扫 
