JS中如何按键分组拼接值？Ionic/Angular场景下对象数组合并问题

实现方案 #

你可以直接用原生TypeScript/JavaScript实现该需求，不需要引入任何第三方依赖，在Ionic/Angular项目中可直接使用：

代码示例

// 你的原始数据
const originalData = [
  { "2021": { "a": "aText" } },
  { "2021": { "b": "bText" } },
  { "2020": { "z": "zText" } },
  { "2020": { "y": "yText" } },
  { "2020": { "x": "xText" } }
];

// 1. 构建年份映射对象，合并同一年份的内部属性
const yearMap: Record<string, Record<string, string>> = {};
originalData.forEach(item => {
  const year = Object.keys(item)[0];
  const innerObj = item[year];
  yearMap[year] = Object.assign(yearMap[year] || {}, innerObj);
});

// 2. 转成目标数组结构，同时支持按年份排序
const result = Object.entries(yearMap)
  // 按年份倒序排列，需要正序可改为 Number(a[0]) - Number(b[0])
  .sort((a, b) => Number(b[0]) - Number(a[0]))
  .map(([year, props]) => ({ [year]: props }));

console.log(result); // 输出即为你需要的结构

说明

• 整体逻辑分为两步：先做分组聚合，再转成目标结构，时间复杂度为O(n)，性能优于多层遍历的实现
• 如果不需要调整年份排序，删掉.sort()那一行即可
• 如果你的原始数据是从接口返回的Observable流，也可以配合RxJS的groupBy、mergeMap等操作符实现流式处理，静态数据场景下上述原生方案更高效

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