如何使用TypeScript合并数组中同cabinFrom属性的对象

原始代码与需求 #

类型定义和初始数据 #

interface IData{
  cabinTo:string[];
  cabinFrom:string;
}

const dataAfterIteration=
 [{cabinTo:"A",cabinFrom:"B"},
  {cabinTo:"A",cabinFrom:"C"}, 
  {cabinTo:"B",cabinFrom:"C"}, 
  {cabinTo:"C",cabinFrom:"A"}]

let dataToPost: Array<IData>=[];

需求 #

把dataAfterIteration的数据存入dataToPost，要求合并所有cabinFrom值相同的对象，将对应的cabinTo值整合到一个数组里。

预期结果 #

dataToPost = [{cabinTo:["A"],cabinFrom:"B"},{cabinTo:["A","B"],cabinFrom:"C"},{cabinTo:["C"],cabinFrom:"A"}]

注：原预期中["A,B"]应为笔误，正确的数组形式是["A","B"]，符合IData接口的类型定义。

解决方案 #

用Array.reduce()实现分组合并是最简洁的方式：

// 按cabinFrom分组，整合cabinTo数组
const groupedData = dataAfterIteration.reduce((accumulator, currentItem) => {
  // 如果当前cabinFrom还没分组，初始化分组对象
  if (!accumulator[currentItem.cabinFrom]) {
    accumulator[currentItem.cabinFrom] = {
      cabinFrom: currentItem.cabinFrom,
      cabinTo: []
    };
  }
  // 将当前cabinTo添加到对应分组的数组中
  accumulator[currentItem.cabinFrom].cabinTo.push(currentItem.cabinTo);
  return accumulator;
}, {} as Record<string, IData>);

// 将分组后的对象转换为数组，赋值给dataToPost
dataToPost = Object.values(groupedData);

代码说明 #

1. reduce()遍历原始数组，用一个对象作为累加器，键是cabinFrom的值，值是对应的IData对象。
2. 遇到新的cabinFrom时，初始化一个包含空cabinTo数组的对象。
3. 每次遍历都把当前项的cabinTo添加到对应分组的数组里。
4. 最后用Object.values()把分组对象转为数组，得到目标格式。

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