javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript Set数组去重并排序

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

作者: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数组去重并排序的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文