JavaScript如何通过单个函数将多组API数组合并属性到主数组

实现逻辑 #

以数组元素的对应位置作为关联匹配基准，支持动态传入任意数量的待合并子数组，合并时自动剔除子数组中冗余的id字段，不修改原有源数据，自动处理子数组长度不一致的场景避免越界报错。

函数代码 #

function mergeToMainArray(mainArr, ...subArrGroup) {
  return mainArr.map((mainItem, currentIndex) => {
    // 遍历所有传入的子数组，收集当前索引位置的有效扩展属性
    const extraProps = subArrGroup.reduce((acc, curSubArr) => {
      // 跳过子数组中不存在当前索引项的情况，避免运行时报错
      if (!curSubArr[currentIndex]) return acc;
      // 拆解出id字段，不将其合并到最终结果
      const { id, ...validProps } = curSubArr[currentIndex];
      return {...acc, ...validProps};
    }, {});
    // 浅拷贝返回合并后的新对象，不改动原主数组数据
    return {...mainItem, ...extraProps};
  });
}

使用示例 #

将主数组和所有待合并子数组作为参数传入函数即可得到合并结果：

// 基于你提供的初始数据调用
const finalResult = mergeToMainArray(MainArr, arr1, arr2, arr3);

特性说明 #

• 不改动原有主数组、子数组的原始数据，所有合并结果为独立的新对象
• 当子数组长度短于主数组长度时，自动跳过缺失位置，不会抛出索引越界错误
• 自动剔除子数组中的id字段，不会将冗余id混入最终合并结果
• 支持灵活传入任意多的子数组，无需提前固定合并的子数组数量

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