数组去重排序的实用技巧与代码实现

在日常开发中，处理数据时经常会遇到重复项的问题。比如从接口获取的一组用户ID，可能因为缓存或多次请求导致存在重复值。这时候就需要对数组进行去重并排序，让数据更整洁、便于后续操作。

常见的去重方法

JavaScript 提供了多种方式来去除数组中的重复元素。使用 Set 是最简洁的一种：

const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [3, 1, 4, 5, 9, 2, 6]

这种方式利用了 Set 结构自动忽略重复值的特性，再通过扩展运算符还原为数组，效率高且代码清晰。

结合排序操作

去重之后通常还需要排序，尤其是数字类型的数组。可以链式调用 sort 方法：

const sortedUniqueArr = [...new Set(arr)].sort((a, b) => a - b);
console.log(sortedUniqueArr); // [1, 2, 3, 4, 5, 6, 9]

注意，sort 默认是按字符串排序的，所以数字比较要传入比较函数 (a, b) => a - b，才能得到正确的升序结果。

兼容复杂场景：对象数组去重

如果数组里存的是对象，比如包含用户信息的列表，就不能直接用 Set 了。可以根据某个唯一字段（如 id）来进行过滤：

const users = [
  {id: 1, name: '张三'},
  {id: 2, name: '李四'},
  {id: 1, name: '张三'},
  {id: 3, name: '王五'}
];

const uniqueUsers = users.filter((item, index, self) =>
  index === self.findIndex(u => u.id === item.id)
);

const sortedUsers = uniqueUsers.sort((a, b) => a.id - b.id);

这里先通过 filter 和 findIndex 配合，确保每个 id 第一次出现的位置才被保留，实现去重；然后再按 id 排序，最终得到干净有序的数据列表。

这种组合操作在前端处理表格数据、下拉选项去重时特别常见，能有效避免页面渲染出重复内容。

性能小贴士

对于大数据量的数组，频繁使用 indexOf 或嵌套循环会导致性能下降。优先选择 Map 或 Set 辅助去重，它们的查找时间复杂度更优。例如用 Map 记录已出现的键值：

function uniqueAndSort(arr) {
  const seen = new Map();
  const result = [];
  for (const item of arr) {
    if (!seen.has(item)) {
      seen.set(item, true);
      result.push(item);
    }
  }
  return result.sort((a, b) => a - b);
}

虽然代码稍长，但在处理上千条数据时会明显快于传统方法。