JavaScript中使用Set对数组去重并排序的示例详解
更新时间：2025年08月14日 10:26:36 作者：excel
在日常的前端开发中,我们经常会遇到这样一个场景：对一个数组进行去重并排序,今天我们就通过一段简单的代码来演示如何在 JavaScript 中快速实现这个功能,感兴趣的小伙伴跟着小编一起来看看吧
在日常的前端开发中，我们经常会遇到这样一个场景：对一个数组进行去重并排序。今天我们就通过一段简单的代码来演示如何在 JavaScript 中快速实现这个功能。
一、原始数据
const arr = [1, 2, 11, 2, 5, 4, 1, 2, 5, 4, 1, 254, 1, 25, 41];
这是一个包含重复元素的数组。我们的目标是：
- 去除数组中的重复值；
- 将结果从小到大排序。
二、使用 Set 去重
const testSet = new Set(arr);
Set 是 ES6 引入的一种新的数据结构，它类似于数组，但其中的值是唯一的。将数组传入 Set 构造函数时，会自动去除重复元素。
此时，testSet 的内容是一个无重复元素的集合（但不是数组）：
Set(9) {1, 2, 11, 5, 4, 254, 25, 41}
三、转换为数组
const testArr = [...testSet];
Set 不是数组，因此无法直接使用数组的方法（如 sort）。我们可以使用扩展运算符（...）将其展开，并放入一个新的数组中。
此时 testArr 是一个已去重的普通数组：
[1, 2, 11, 5, 4, 254, 25, 41]
四、进行排序
testArr.sort((a, b) => a - b);
JavaScript 的数组 sort() 方法默认按照字符串的 Unicode 顺序排序，这在处理数字时常常会得出错误结果（例如 [1, 2, 11] 会变成 [1, 11, 2]）。因此，我们需要传入一个比较函数 (a, b) => a - b 来确保按数值从小到大排序。
最终的 testArr 是：
[1, 2, 4, 5, 11, 25, 41, 254]
五、完整代码回顾
const arr = [1, 2, 11, 2, 5, 4, 1, 2, 5, 4, 1, 254, 1, 25, 41]; const testSet = new Set(arr); // 去重 const testArr = [...testSet]; // 转换为数组 testArr.sort((a, b) => a - b); // 数值排序 console.log(testArr); // 输出结果
六、总结
这段代码展示了一个非常实用的 JavaScript 小技巧，结合了 ES6 的 Set 和现代语法糖 ... 展开符，搭配 sort 函数，使得数组的去重与排序一气呵成，简洁高效，极具实用性。
这种写法在处理用户输入、表单数据、日志数据分析等场景中都非常常见，值得掌握。
以上就是JavaScript中使用Set对数组去重并排序的示例详解的详细内容，更多关于JavaScript Set数组去重并排序的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Flexible.js可伸缩布局实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了javascript实现表单验证的相关资料，以一个完整的实例对javascript实现表单验证的方法进行分析，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了微信小程序实现选择内容显示对应内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在JavaScript中,当使用fetch API发送网络请求时可能会遇到中断的错误,这篇文章主要介绍了JavaScript中fetch流式实现中断重连的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-03-03
这篇文章主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下2016-05-05
javascript动态添加样式(行内式/嵌入式/外链式等规则)
添加CSS的方式有行内式、嵌入式、外链式、导入式，下面为大家详细介绍下javascript动态添加以上样式规则的方法，感兴趣的朋友可以参考下哈2013-06-06
js加强的经典分页实例，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了JS实现的点击表头排序功能,可实现针对表格中的字母、数字、日期等格式进行排序的功能,涉及javascript针对页面table元素的获取及字符串、数字等排序操作相关技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了Json实现传值到后台代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
这篇文章主要是对jquery检测元素是否存在的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
最新评论