如何用Segment数组扩充Catalog数组且不产生重复元素？

现有一个catalogs数组，其中catId可重复，但每个catId对应的segmentId具有唯一性，数组结构如下：

const catalogs = [
  { catID: 3, segmentId: '3', segmentName: 'S3' },
  { catID: 2, segmentId: '2', segmentName: 'S2' },
  { catID: 2, segmentId: '3', segmentName: 'S3' },
  { catID: 1, segmentId: '1', segmentName: 'S1' },
  { catID: 1, segmentId: '2', segmentName: 'S2' },
  { catID: 1, segmentId: '3', segmentName: 'S3' }
];

需要将给定的segments数组（示例：[{id: '3', name: 'S3'},{id: '4', name: 'S4'},{id: '5', name: 'S5'}]）分配给catalogs数组，使每个catId包含自身原有segment及新segments的所有项，生成如下预期格式的结果：

[
  { catID: 3, segmentId: '3', label: { segmentIDName: '3_S3' } },
  { catID: 3, segmentId: '4', label: { segmentIDName: '4_S4' } },
  { catID: 3, segmentId: '5', label: { segmentIDName: '5_S5' } },
  { catID: 2, segmentId: '2', label: { segmentIDName: '2_S2' } },
  { catID: 2, segmentId: '3', label: { segmentIDName: '3_S3' } },
  { catID: 2, segmentId: '4', label: { segmentIDName: '4_S4' } },
  { catID: 2, segmentId: '5', label: { segmentIDName: '5_S5' } },
  { catID: 1, segmentId: '1', label: { segmentIDName: '1_S1' } },
  { catID: 1, segmentId: '2', label: { segmentIDName: '2_S2' } },
  { catID: 1, segmentId: '3', label: { segmentIDName: '3_S3' } },
  { catID: 1, segmentId: '4', label: { segmentIDName: '4_S4' } },
  { catID: 1, segmentId: '5', label: { segmentIDName: '5_S5' } }
]

现有代码问题 #

本人尝试编写了如下JavaScript函数，但未得到预期结果，请求帮忙排查问题或提供更优实现方案：

const catalogs = [
  { catID: 2, segmentId: '2', segmentName: 'S2' },
  { catID: 1, segmentId: '1', segmentName: 'S1' },
  { catID: 1, segmentId: '2', segmentName: 'S2' }
];

function addSegmentsToCatalogs(segments){

    let catalogUid = catalogs[0].catID;
    const lastCatalog = catalogs.slice(-1).pop();
    const insertionArray = [];
    
  catalogs.forEach(async (catalog) => {
    if (catalogUid != catalog.catID) {
      segments.forEach((segment) => {
        insertionArray.push({
          catalogId: catalogUid,
          segmentId: segment.id,
          segmentName: segment.name,
        });
      });

      catalogUid = catalog.catID;
    }

    if (!segments.some((segment) => segment.id === catalog.segmentId)) {

      segments.push({ id: catalog.segmentId, name: catalog.segmentName });

      if (
        catalog.catID == lastCatalog.catID &&
        catalog.segmentId == lastCatalog.segmentId
      ) {
        segments.forEach((segment) => {
          insertionArray.push({
            catalogId: catalogUid,
            segmentId: segment.id,
            segmentName: segment.name,
          });
        });
      }
    }
    });
  
  console.log(insertionArray);
  return insertionArray;
}

addSegmentsToCatalogs([{id: '3', name: 'S3'}])

问题排查 #

你的代码存在以下核心问题：

• 异步遍历干扰：forEach中使用async关键字会导致遍历逻辑异步执行，console.log和return会在遍历完成前触发，导致返回的数组不完整。
• 修改原参数数组：直接对传入的segments执行push操作，会污染原数组，引发意外副作用。
• 逻辑覆盖不全：仅在catId切换和遍历到最后一项时添加新segment，无法保证每个catId都能获取完整的segment集合，且输出字段与预期格式不匹配（比如用了catalogId而非catID，缺少label结构）。
• 无去重处理：原有segment和新segment重复时，会生成重复项。

更优实现方案 #

我们可以拆解为三步处理，逻辑清晰且无副作用：

const catalogs = [
  { catID: 3, segmentId: '3', segmentName: 'S3' },
  { catID: 2, segmentId: '2', segmentName: 'S2' },
  { catID: 2, segmentId: '3', segmentName: 'S3' },
  { catID: 1, segmentId: '1', segmentName: 'S1' },
  { catID: 1, segmentId: '2', segmentName: 'S2' },
  { catID: 1, segmentId: '3', segmentName: 'S3' }
];

function addSegmentsToCatalogs(segments) {
  // 1. 提取所有唯一的catID，保留原数组中的顺序
  const uniqueCatIds = [...new Map(catalogs.map(item => [item.catID, item.catID])).keys()];
  
  const result = [];
  uniqueCatIds.forEach(catId => {
    // 2. 获取当前catID的所有原有segment
    const existingSegments = catalogs
      .filter(item => item.catID === catId)
      .map(item => ({ id: item.segmentId, name: item.segmentName }));
    
    // 合并原有和新增segment，根据id去重
    const allSegments = [...new Map([...existingSegments, ...segments].map(s => [s.id, s])).values()];
    
    // 3. 格式化为预期的输出结构
    allSegments.forEach(segment => {
      result.push({
        catID: catId,
        segmentId: segment.id,
        label: {
          segmentIDName: `${segment.id}_${segment.name}`
        }
      });
    });
  });
  
  return result;
}

// 测试示例
const newSegments = [{id: '3', name: 'S3'},{id: '4', name: 'S4'},{id: '5', name: 'S5'}];
console.log(addSegmentsToCatalogs(newSegments));

方案优势 #

• 无副作用：不修改原catalogs和segments数组，避免意外问题。
• 逻辑清晰：分步骤处理，可读性强，便于后续维护。
• 自动去重：通过Map根据segment.id去重，确保每个catId下的segmentId唯一。
• 严格匹配格式：完全按照需求生成catID、segmentId和label结构。

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