Angular中如何依据特定值将两个数组合并为目标数组？

问题分析 #

你需要将importData1和importData2中的数据，按analyticId/measureId分组整合，最终生成符合TestInterface结构的数组。原代码存在几个关键问题：

• 赋值误用==（应为=），导致字段根本没被赋值
• 直接通过数组索引绑定test元素，未按analyticId/measureId分组，同ID的数据无法整合到同一对象
• test数组初始为空，直接访问test[i]会抛出undefined错误
• 存在拼写错误：descrition应为description

解决方案 #

核心思路是用analyticId/measureId作为唯一标识，将两个数组的数据归类到对应标识的对象中，最后把分组后的对象转为目标数组。

1. 定义字段映射关系 #

先建立analyticDescriptionTypeId与TestInterface字段的映射，避免冗余的if判断：

// importData1的类型ID与目标字段映射
const data1FieldMap: Record<number, keyof TestInterface> = {
  1: 'id',
  2: 'name',
  3: 'price',
  4: 'stored'
};

// importData2的类型ID与目标字段映射
const data2FieldMap: Record<number, keyof TestInterface> = {
  1: 'costPerPound',
  2: 'mixture'
};

2. 实现合并方法 #

用reduce分组处理第一个数组，再遍历第二个数组合并数据：

fillArray(importData1: any[], importData2: any[]) {
  // 第一步：处理importData1，按analyticId+measureId分组
  const groupedData = importData1.reduce((acc, item) => {
    // 生成唯一键（根据实际数据结构调整，确保同组数据键值唯一）
    const uniqueKey = `${item.analyticId}-${item.measureId}`;
    // 初始化空的TestInterface对象
    if (!acc[uniqueKey]) {
      acc[uniqueKey] = {} as TestInterface;
    }
    // 匹配对应字段并赋值
    const targetField = data1FieldMap[item.analyticDescriptionTypeId];
    if (targetField) {
      acc[uniqueKey][targetField] = item.description;
    }
    return acc;
  }, {} as Record<string, TestInterface>);

  // 第二步：处理importData2，合并到已有分组
  importData2.forEach(item => {
    const uniqueKey = `${item.analyticId}-${item.measureId}`;
    if (groupedData[uniqueKey]) {
      const targetField = data2FieldMap[item.analyticDescriptionTypeId];
      if (targetField) {
        groupedData[uniqueKey][targetField] = item.description;
      }
    }
    // 若需保留importData2中独有的数据，可取消下面注释
    // else {
    //   groupedData[uniqueKey] = {} as TestInterface;
    //   groupedData[uniqueKey][targetField] = item.description;
    // }
  });

  // 第三步：将分组对象转为数组
  this.test = Object.values(groupedData);
  console.log(this.test);
}

3. 调用示例 #

在组件中获取到importData1和importData2后，直接调用方法即可：

this.fillArray(this.importData1, this.importData2);

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