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

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

相关推荐
前端Hardy13 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy13 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙14 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
web前端12314 小时前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天14 小时前
前端 9大 设计模式
前端
搞个锤子哟14 小时前
网站页面放大缩小带来的问题
前端
hj5914_前端新手14 小时前
React 基础 - useState、useContext/createContext
前端·react.js
半花14 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
霍格沃兹_测试14 小时前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
toooooop814 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket