JavaScript 对象数组按指定字段排序异常问题求助

我有一组对象类型的列表项，需要通过fieldName字段对这些项进行排序。大部分时候排序正常，但有部分项出现排序异常。

我的排序代码如下：

elements.slice(0).sort((a, b) => {
      if (a[fieldName] === '' || a[fieldName] == null) return 1;
      if (b[fieldName] === '' || b[fieldName] == null) return -1;

      return (
        itemSort
          ? a[fieldName]?.toLowerCase() < b[fieldName]?.toLowerCase()
          : a[fieldName]?.toLowerCase() > b[fieldName]?.toLowerCase()
      )
        ? 1
        : -1;
    })

itemSort是布尔值，用来控制排序是A-Z还是Z-A顺序。只有部分项出现异常，异常表现如下：

elements数组示例：

[
{
icon: "IssueTracking",
id: "62a0868c2b2b180061ab05d8",
name: "[DEMO ASLC] All Issues",
type: "sheet",
updatedAt: "2022-12-05T15:17:23.072Z",
url: "/admin/documents/edit/62a0868c2b2b180061ab05d8"
},
{
icon: "...",
id: "...",
name: "...",
type: "...",
updatedAt: "...",
url: "..."
},
...
]

问题分析与修复 #

当前排序函数的核心问题是未处理字段值相等的情况，且空值逻辑未适配倒序场景：

1. 当两个字段值转小写后相等时，函数始终返回-1，会破坏排序稳定性，导致相同值的元素位置混乱，也就是你看到的部分项排序异常。
2. 空值/空字符串的处理逻辑固定，倒序时空值的位置不符合预期。

修复后的代码 #

elements.slice(0).sort((a, b) => {
  // 提取字段值，统一判断空值
  const aVal = a[fieldName];
  const bVal = b[fieldName];
  const isANull = aVal === '' || aVal == null;
  const isBNull = bVal === '' || bVal == null;

  // 空值处理：无论正序倒序，空值都排在最后
  if (isANull && isBNull) return 0;
  if (isANull) return 1;
  if (isBNull) return -1;

  // 统一转小写后比较
  const aLower = aVal.toLowerCase();
  const bLower = bVal.toLowerCase();
  
  // 相等时返回0，保证排序稳定性
  if (aLower === bLower) return 0;

  // 根据itemSort控制正/倒序
  return itemSort 
    ? (aLower < bLower ? -1 : 1) // A-Z正序：值小的排前面
    : (aLower > bLower ? -1 : 1); // Z-A倒序：值大的排前面
})

关键修复点 #

• 增加相等值判断，返回0确保排序稳定性，解决相同值元素位置混乱问题
• 统一空值处理逻辑，无论正序倒序都将空值排在末尾（若需空值排前，可调整返回值）
• 简化正/倒序判断逻辑，完全符合sort函数的返回规范（负数：a在前；正数：b在前；0：顺序不变）

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