如何从apiResponse中按RouteId和InDirection聚合AreaCode数组？

问题描述 #

需要从给定的apiResponse数组中，按RouteId和InDirection的组合分组，将每组对应的AreaCode整合为数组，生成包含RouteId、InDirection及对应AreaCode数组的新对象数组。

示例数据 #

apiResponse示例：

const apiResponse = [
  { RouteId: 1, InDirection: 1, AreaCode: 'A' },
  { RouteId: 1, InDirection: 1, AreaCode: 'B' },
  { RouteId: 1, InDirection: 2, AreaCode: 'C' },
  { RouteId: 2, InDirection: 1, AreaCode: 'D' },
  { RouteId: 2, InDirection: 2, AreaCode: 'E' },
  { RouteId: 2, InDirection: 2, AreaCode: 'F' }
];

预期结果：

[
  { RouteId: 1, InDirection: 1, AreaCodes: ['A', 'B'] },
  { RouteId: 1, InDirection: 2, AreaCodes: ['C'] },
  { RouteId: 2, InDirection: 1, AreaCodes: ['D'] },
  { RouteId: 2, InDirection: 2, AreaCodes: ['E', 'F'] }
];

原方法的问题 #

你尝试的filter+map组合会遍历原数组每一个元素，导致同一分组的对象被重复创建，最终结果会包含大量重复项，无法得到唯一的分组数组。

最优解决方案：使用reduce分组 #

reduce是处理分组场景的高效方法，只需遍历一次原数组即可完成分组：

const groupedResult = Object.values(apiResponse.reduce((acc, current) => {
  // 生成唯一分组键，避免不同RouteId+InDirection组合冲突
  const key = `${current.RouteId}_${current.InDirection}`;
  
  // 初始化分组对象（如果不存在）
  if (!acc[key]) {
    acc[key] = {
      RouteId: current.RouteId,
      InDirection: current.InDirection,
      AreaCodes: []
    };
  }
  
  // 将当前AreaCode加入对应分组的数组
  acc[key].AreaCodes.push(current.AreaCode);
  
  return acc;
}, {}));

逻辑说明：

1. 用reduce遍历原数组，累加器acc是一个临时对象，存储分组后的结果，键为RouteId_InDirection的唯一字符串，值为对应的分组对象。
2. 每处理一个元素，先检查对应分组是否存在，不存在则初始化包含RouteId、InDirection和空AreaCodes数组的对象。
3. 将当前元素的AreaCode推入对应分组的数组。
4. 最后用Object.values()提取临时对象的所有值，得到目标数组。

备选方案：去重后使用filter+map #

如果坚持使用filter+map，需要先提取所有唯一的分组组合，再遍历这些组合生成结果（性能略低于reduce，适合小数据量场景）：

// 提取所有唯一的RouteId+InDirection组合
const uniqueGroups = [...new Set(apiResponse.map(item => `${item.RouteId}_${item.InDirection}`))];

const result = uniqueGroups.map(key => {
  const [routeId, inDirection] = key.split('_').map(Number);
  // 筛选当前分组的所有元素
  const groupItems = apiResponse.filter(item => item.RouteId === routeId && item.InDirection === inDirection);
  return {
    RouteId: routeId,
    InDirection: inDirection,
    AreaCodes: groupItems.map(item => item.AreaCode)
  };
});

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