JavaScript 结合reduce与sort按groupId分组并按groupDisplayOrder排序

首先明确一个前提：没有办法在单次遍历原数组的过程中，同时完成分组+全组排序的操作——因为排序是全局动作，需要集齐所有组的groupDisplayOrder值才能算出正确顺序，单遍遍历中途没法拿到后续出现的分组信息，自然没法提前排好序。

你当前的实现步骤偏多，本质是存在两次无意义的重复遍历：

• 分组完成后，需要反过来遍历每个分组的首元素读取groupDisplayOrder值做排序，实际上这个值在第一次遇到对应分组时就已经拿到了，完全没必要回头翻查
• 最后再遍历一次排好序的分组key，重新拼接全新的对象，属于纯重复搬运已经存好的数据

可以把整个流程压缩到轻量的两步操作，且原数组只遍历一次，没有冗余读取：

1. 单次遍历原数组，直接把分组数据、对应排序值一起存在高效结构里（用Map实现去重，避免重复判断）
2. 对收集好的所有分组按groupDisplayOrder排序，直接生成最终对象

具体代码实现和你的原有逻辑完全对齐（同样会跳过没有groupId的无效项）：

// 唯一一次遍历原数组：完成分组、记录分组排序值
const groupStore = new Map();
groceryArray.forEach(item => {
  if (!item.groupId) return;
  // 第一次遇到该分组时，初始化存储结构，存下排序值和空的元素数组
  if (!groupStore.has(item.groupId)) {
    groupStore.set(item.groupId, {
      displayOrder: item.groupDisplayOrder,
      items: []
    });
  }
  // 把当前元素加到对应分组的数组里
  groupStore.get(item.groupId).items.push(item);
});

// 对所有分组按排序值排序，直接生成最终对象
const finalOutput = Object.fromEntries(
  [...groupStore.entries()]
    // 按groupDisplayOrder升序排列分组
    .sort(([, groupA], [, groupB]) => groupA.displayOrder - groupB.displayOrder)
    // 提取为 [groupId, 分组元素数组] 的键值对结构
    .map(([groupId, groupData]) => [groupId, groupData.items])
);

• 原实现的遍历开销：3次全量流程（遍历原数组分组→遍历分组对象计算排序→遍历排好的key拼接对象），排序环节还要重复读取每个分组内部的属性
• 优化后的遍历开销：仅1次原数组遍历，1次分组层面的轻量排序，没有重复数据读取，最终输出的finalOutput结构和键顺序和你给出的示例完全一致。

补充说明：JS 从ES2019开始规范了普通对象的字符串key插入顺序，只要按排序好的顺序生成键值对，最终生成的对象就会严格保留你期望的顺序，不需要做额外兼容处理。

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