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

在日常的前端开发中，我们经常会遇到这样一个场景：对一个数组进行去重并排序。今天我们就通过一段简单的代码来演示如何在 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]

---

四、进行排序

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

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