如何在 JavaScript 中对对象数组进行排序？

Source: Dev.to

对对象数组进行排序是使用 JavaScript 时经常会遇到的需求。它通常出现在处理表格、列表或来自 API 的数据时。

在大多数应用中，数据并不会以你想要的顺序到达。API 响应、数据库查询结果或用户生成的内容通常是无序的，所以在把它们显示到屏幕之前，你必须自行处理排序。排序在渲染表格行、按名称或价格列出商品、或按字母顺序显示用户时尤其有用。一个细小的细节——正确的顺序——可以让 UI 更易用，并帮助防止 bug。

sort() 方法

JavaScript 的 Array.prototype.sort() 方法会重新排列数组的元素。当你对对象进行排序时，需要提供一个比较函数，告诉 JavaScript 两个项目应该如何比较。

比较函数接收两个元素并返回：

• 负值 → a 在 b 前面
• 正值 → b 在 a 前面
• 0 → 顺序不变

array.sort((a, b) => {
  // return negative, positive, or 0
});

注意： sort() 会修改原数组。这在处理状态或复用数据时常常让人感到意外。

大多数情况下，你不会直接对对象本身排序，而是基于它们的某个属性（如名称、价格或日期）进行排序。

按字符串属性排序

在处理姓名、标题或标签时很常见。

基本字符串排序

users.sort((a, b) => a.name.localeCompare(b.name));

不区分大小写的排序

users.sort((a, b) =>
  a.name.toLowerCase().localeCompare(b.name.toLowerCase())
);

降序

users.sort((a, b) => b.name.localeCompare(a.name));

使用 localeCompare() 通常比手动字符串比较更安全，且结果更一致。

按数值和日期属性排序

数值排序

products.sort((a, b) => a.price - b.price);

日期字符串排序

在比较之前先将日期字符串转换为 Date 对象：

events.sort((a, b) => new Date(a.date) - new Date(b.date));

这样可以避免使用普通字符串比较时出现的错误顺序。

可复用的排序助手

为每个字段编写新的比较函数会变得重复。一个小的工具函数可以简化这个过程：

function sortBy(key, order = "asc") {
  return (a, b) => {
    if (typeof a[key] === "string") {
      return order === "asc"
        ? a[key].localeCompare(b[key])
        : b[key].localeCompare(a[key]);
    }
    // Assume numeric or Date values
    return order === "asc"
      ? a[key] - b[key]
      : b[key] - a[key];
  };
}

使用方法

users.sort(sortBy("name"));
products.sort(sortBy("price", "desc"));

如果需要保持原数组不变：

const sortedUsers = [...users].sort(sortBy("name"));

注意事项

• 避免在仍需原始未排序数据的情况下修改原数组。
• 字符串排序优先使用 localeCompare()，而不是自定义逻辑。
• 优雅地处理缺失或 undefined 的值，以防运行时错误。
• 对混合类型保持警惕（例如以字符串形式存储的数字）——在比较前确保类型一致。

结论

对对象数组进行排序是使用 JavaScript 时的常规操作。只要理解了 sort() 和比较函数的工作原理，大多数场景都能轻松实现。对于简单需求，直接调用 sort() 即可。随着项目规模的扩大，可复用的排序助手可以让代码更简洁、更易维护，从而在不增加复杂度的情况下处理真实世界的数据。