JavaScript中使用Set对数组去重并排序的示例详解

更新时间：2025年08月14日 10:26:36 作者：excel

在日常的前端开发中,我们经常会遇到这样一个场景：对一个数组进行去重并排序,今天我们就通过一段简单的代码来演示如何在 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数组去重并排序的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

前端点击预览图片Viewer.js使用方法(简单的操作)
这篇文章主要介绍了前端点击预览图片Viewer.js使用的相关资料,Viewer.js是一款强大的图片查看器,支持移动设备触摸事件、响应式、放大/缩小、旋转、翻转、移动、键盘操作、全屏幻灯片模式、缩略图和标题显示等功能,需要的朋友可以参考下
2025-01-01
JS基于Location实现访问Url、重定向及刷新页面的方法分析
这篇文章主要介绍了JS基于Location实现访问Url、重定向及刷新页面的方法,结合实例形式分析了javascript使用Location进行URL访问、重定向、页面刷新等操作相关原理、操作技巧与注意事项,需要的朋友可以参考下
2018-12-12
JS if else语句(条件判断语句)的详细使用
条件语句用于基于不同的条件来执行不同的动作,下面这篇文章主要给大家介绍了关于JS if else语句(条件判断语句)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
JS匀速运动演示示例代码
匀速运动的效果想必大家都有见到过吧，在本文为大家介绍下使用JS是如何实现的，感兴趣的朋友不要错过
2013-11-11
JSON是什么？有哪些优点？JSON和XML的区别？
这篇文章主要介绍了JSON是什么？有哪些优点？JSON和XML的区别？下面就来详细的介绍两种的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-04-04
JavaScript禁止用户多次提交的两种方法
这篇文章主要介绍了JavaScript禁止用户多次提交的两种方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
JavaScript实现控制并发请求的方法详解
这篇文章主要为大家详细介绍了如果有100个请求,那么如何使用JavaScript实现控制并发请求,感兴趣的小伙伴可以跟随小编一起学习一
2024-03-03
childNodes 用法两例
childNodes实现代码
2009-04-04
JS实现求5的阶乘示例
这篇文章主要介绍了JS实现求5的阶乘,结合实例形式分析了javascript基于循环及递归等操作实现阶乘运算的相关技巧,需要的朋友可以参考下
2019-01-01
JavaScript按位运算符的应用简析
下面根据自己的认知简单的谈一下js中的位操作使用（同样适用于其他语言），如果有错误，欢迎指正
2014-02-02