悠悠楠杉
网站页面
JavaScript数组去重与排序实战指南
01/03
正文：
在JavaScript开发中，处理数组去重并排序是高频操作。比如从API获取的含重复项的数据，需先清洗再展示。如何高效实现？以下是几种经典方案，附性能对比和真实场景应用。
一、Set去重 + sort排序（ES6推荐）
const arr = [3, 1, 2, 2, 5, 4];
const uniqueSorted = [...new Set(arr)].sort((a, b) => a - b);
console.log(uniqueSorted); // [1, 2, 3, 4, 5]优点：代码简洁，Set自动去重，sort指定升序。适合现代浏览器环境。
二、filter索引检查 + 快速排序
const uniqueByFilter = arr
.filter((item, index) => arr.indexOf(item) === index)
.sort((a, b) => a - b);注意：indexOf遍历会导致O(n²)时间复杂度，大数据量时性能较差。
三、reduce累加器方案（兼容性更强）
const uniqueByReduce = arr.reduce((acc, cur) => {
if (!acc.includes(cur)) acc.push(cur);
return acc;
}, []).sort((a, b) => a - b);此方法逻辑清晰，但同样存在includes遍历的性能问题。
性能优化建议
- 数据量超过1万时：优先使用Set，比filter快10倍以上（实测V8引擎下）。
- 需兼容IE时：改用对象哈希替代Set，如
const seen = {}; arr.forEach(v => seen[v] = true)。
真实案例：电商价格筛选
假设从后端获取商品价格数组[99, 65, 99, 128, 65]，需展示唯一且升序的价格选项：
const prices = [99, 65, 99, 128, 65];
const priceOptions = [...new Set(prices)].sort((a, b) => a - b);
// 渲染到下拉菜单：65, 99, 128掌握这些方法后，能灵活应对表单数据清洗、可视化图表预处理等场景。关键是根据实际需求平衡代码简洁性与执行效率。
