JavaScript 排序对象数组时如何保留空SectionName对象的原有分布位置

现有逻辑的问题 #

当前通用的直接遍历数组比较SectionName.toUpperCase()的排序逻辑，会在比较空字符串时将其判定为字符串最小值，导致所有SectionName为空的对象被统一排到数组最前端，完全破坏原数组中空对象相邻分布的位置关系。

实现规则 #

按照需求排序时需要同时满足两个约束：

• 所有SectionName非空的对象，严格按照SectionName大写值的字母顺序做升序排列
• 原数组中SectionName为空（ID为0、SectionName为''）的对象，完全保留在原数组中的位置，不参与排序移位

实现步骤 #

• 从原始数组中筛选出所有SectionName非空的对象，组成独立临时列表
• 对临时列表执行升序排序，排序规则为比较对象SectionName转大写后的字母顺序
• 遍历原始数组构建最终结果：
  • 遇到SectionName为空的对象，直接将原对象放入结果数组，保持原有位置
  • 遇到SectionName非空的对象，按顺序从已排好序的临时列表中取出对应元素放入结果数组

参考代码 #

function sortSectionArray(originList) {
  // 提取非空项并完成排序
  const sortedItems = originList
    .filter(item => item.SectionName !== '')
    .sort((a, b) => a.SectionName.toUpperCase().localeCompare(b.SectionName.toUpperCase()));
  
  let currentPickIndex = 0;
  // 按原数组结构替换非空位置的元素
  return originList.map(item => {
    if (item.SectionName === '') {
      return item;
    }
    return sortedItems[currentPickIndex++];
  });
}

效果验证 #

以包含非空值Cabinet、Frame、Alt、Upper、Lower，以及分布在不同位置空对象的测试数组为例：

1. 筛选得到的非空对象列表经排序后顺序为Alt、Cabinet、Frame、Lower、Upper
2. 遍历原数组替换非空位置后，所有空对象完全保留原有相对间隔位置，非空对象严格按排序顺序填入，完全匹配预期输出要求

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