如何对array.object重新排序：同type下displayOrder为空元素排至末尾

需求说明 #

现有一个对象数组，需要实现：

• 按type字段分组，相同type的元素放在一起
• 同一type分组内，displayOrder为空字符串的元素排在该组的最后；非空元素按displayOrder的数值升序排列

原始数组 #

[
  {
    "displayOrder": "",
    "type": "moment",
  },
  {
    "displayOrder": "2",
    "type": "moment",
  },
  {
    "displayOrder": "4",
    "type": "moment",
  },
  {
    "displayOrder": "1",
    "type": "presentation",
  }
]

期望排序后的数组 #

[
  {
    "displayOrder": "2",
    "type": "moment",
  },
  {
    "displayOrder": "4",
    "type": "moment",
  },
  {
    "displayOrder": "",
    "type": "moment",
  },
  {
    "displayOrder": "1",
    "type": "presentation",
  }
]

实现方案 #

直接使用JavaScript的Array.sort()方法，自定义比较函数实现需求：

const sortedArray = originalArray.sort((a, b) => {
  // 先按type分组，相同type的元素聚集在一起
  if (a.type !== b.type) {
    return a.type.localeCompare(b.type);
  }
  
  // 同一type内处理displayOrder排序
  const aHasOrder = a.displayOrder !== "";
  const bHasOrder = b.displayOrder !== "";
  
  // 空值排末尾：a空b非空，a放后面
  if (!aHasOrder && bHasOrder) return 1;
  // b空a非空，b放后面
  if (aHasOrder && !bHasOrder) return -1;
  
  // 都非空时，按displayOrder数值升序排列
  return Number(a.displayOrder) - Number(b.displayOrder);
});

逻辑解释 #

1. 分组排序：通过localeCompare比较type字符串，确保相同type的元素排在一起。
2. 空值后置：判断元素的displayOrder是否为空，直接将空值元素排到非空元素之后。
3. 非空值排序：将非空的displayOrder转为数字后比较，实现数值升序排列。

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