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

在日常的前端开发中,我们经常会遇到这样一个场景:对一个数组进行去重并排序。今天我们就通过一段简单的代码来演示如何在 JavaScript 中快速实现这个功能。

一、原始数据

js 复制代码
const arr = [1, 2, 11, 2, 5, 4, 1, 2, 5, 4, 1, 254, 1, 25, 41];

这是一个包含重复元素的数组。我们的目标是:

  • 去除数组中的重复值;
  • 将结果从小到大排序。

二、使用 Set 去重

js 复制代码
const testSet = new Set(arr);

Set 是 ES6 引入的一种新的数据结构,它类似于数组,但其中的值是唯一的 。将数组传入 Set 构造函数时,会自动去除重复元素。

此时,testSet 的内容是一个无重复元素的集合(但不是数组):

js 复制代码
Set(9) {1, 2, 11, 5, 4, 254, 25, 41}

三、转换为数组

js 复制代码
const testArr = [...testSet];

Set 不是数组,因此无法直接使用数组的方法(如 sort)。我们可以使用扩展运算符(...)将其展开,并放入一个新的数组中。

此时 testArr 是一个已去重的普通数组:

js 复制代码
[1, 2, 11, 5, 4, 254, 25, 41]

四、进行排序

css 复制代码
js
复制编辑
testArr.sort((a, b) => a - b);

JavaScript 的数组 sort() 方法默认按照字符串的 Unicode 顺序 排序,这在处理数字时常常会得出错误结果(例如 [1, 2, 11] 会变成 [1, 11, 2])。因此,我们需要传入一个比较函数 (a, b) => a - b 来确保按数值从小到大排序。

最终的 testArr 是:

js 复制代码
[1, 2, 4, 5, 11, 25, 41, 254]

五、完整代码回顾

js 复制代码
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 函数,使得数组的去重与排序一气呵成,简洁高效,极具实用性。

这种写法在处理用户输入、表单数据、日志数据分析等场景中都非常常见,值得掌握。

相关推荐
真的想不出名儿16 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊16 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅16 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防17 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump17 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅17 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士18 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing18 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
MediaTea19 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter
少年阿闯~~19 小时前
CSS——重排和重绘
前端