JavaScript如何按指定字段与排序方向对对象数组进行排序

问题根因 #

现有排序逻辑仅支持数值类型字段的比较，当排序字段为name这类字符串类型时，a[order.field] - b[order.field]的减号运算会返回NaN，导致排序规则失效。同时JS的sort方法是原地排序，会直接修改原数组，也容易产生预期外的副作用。

通用解决方案 #

使用localeCompare方法实现全类型兼容的排序，该方法天然支持字符串、数字、中文等多种类型的比较，只需少量适配即可满足升/降序需求：

// 先浅拷贝原数组，避免sort修改原数组
const orderedList = [...list].sort((a, b) => {
  const valueA = a[order.field];
  const valueB = b[order.field];
  // 通用比较逻辑，适配多类型
  const compareRes = String(valueA).localeCompare(String(valueB), 'zh-CN', {
    numeric: true, // 确保数值按大小排序，避免出现'10' < '2'的问题
    sensitivity: 'base' // 字符串比较忽略大小写，不需要可以删除该配置
  });
  return order.asc ? compareRes : -compareRes;
});

可选优化 #

如果你能确定排序字段仅为数值类型，也可以用类型判断分支减少不必要的字符串转换：

const orderedList = [...list].sort((a, b) => {
  const valueA = a[order.field];
  const valueB = b[order.field];
  let compareRes;
  if (typeof valueA === 'number' && typeof valueB === 'number') {
    compareRes = valueA - valueB;
  } else {
    compareRes = String(valueA).localeCompare(String(valueB), 'zh-CN', { numeric: true });
  }
  return order.asc ? compareRes : -compareRes;
});

内容的提问来源于stack exchange，提问作者Laterneman