JavaScript数组按分值排序 分值相等时按更新时间倒序实现方法

需求说明 #

需要对对象格式的数组实现两级排序规则：

• 第一优先级：按point字段值排序，支持分值从低到高、从高到低两种模式
• 第二优先级：当两个数据项point值相等时，updatedAt更新时间更晚的项排在靠前位置

测试样例数据 #

[
  {
    "name": "Item 1",
    "point": 3,
    "updatedAt": "10/06/2022 9:39"
  },
  {
    "name": "Item 2",
    "point": 4,
    "updatedAt": "10/06/2022 9:45"
  },
  {
    "name": "Item 3",
    "point": 2,
    "updatedAt": "10/06/2022 9:39"
  },
  {
    "name": "Item 4",
    "point": 1,
    "updatedAt": "10/06/2022 9:39"
  },
  {
    "name": "Item 5",
    "point": 5,
    "updatedAt": "10/06/2022 9:39"
  },
  {
    "name": "Item 6",
    "point": 2,
    "updatedAt": "11/06/2022 3:05"
  }
]

排序预期：Item 3和Item 6的point值均为2，Item 6更新时间更晚，排序后Item 6应排在Item 3之前。

原有代码问题 #

当前实现仅处理了point字段的排序逻辑，没有覆盖point相等时的时间判断分支，因此无法实现次级排序需求，原有代码如下：

if (sortBy === "lowtohigh") {
      computedData = data.sort((a, b) => {
        return a.point - b.point
      });
}
if (sortBy === "hightolow") {
      computedData = data.sort((a, b) => {
        return b.point - a.point
      });
}

修正后实现代码 #

实现逻辑：

• 先计算两个对比项的point差值，差值不为0时直接按point规则排序
• 差值为0（即point相等）时，将updatedAt转为时间戳对比，更新时间更晚的项靠前
• 注意Array.sort会直接修改原数组，如果需要保留原数组顺序，可先通过浅拷贝生成新数组再排序

if (sortBy === "lowtohigh") {
  computedData = [...data].sort((a, b) => {
    // 先按point升序排列
    const pointDiff = a.point - b.point;
    if (pointDiff !== 0) return pointDiff;
    // point相等时按更新时间降序，更新晚的排在前面
    return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
  });
}
if (sortBy === "hightolow") {
  computedData = [...data].sort((a, b) => {
    // 先按point降序排列
    const pointDiff = b.point - a.point;
    if (pointDiff !== 0) return pointDiff;
    // point相等时按更新时间降序，更新晚的排在前面
    return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
  });
}

按上述代码处理样例数据，point为2的两个项排序后顺序为Item 6在前、Item 3在后，符合预期效果。

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