JavaScript实现产品按层级类别嵌套分组的解决方案

问题说明 #

我有两类数组：

• 类别数组：包含2位编码的主类别、3位编码的二级类别、5位编码的三级类别
• 产品数组：每个产品的productNumber前5位对应三级类别ID

需要将每个产品对应到所属的三级、二级及主类别中，形成完整的嵌套层级结构。之前尝试用嵌套for循环仅实现了产品在主类别的分组，未达成完整嵌套，寻求更优解决方案。

示例数据 #

类别数组 #

[
  { categoryId: '01', categoryName: '建筑材料' },
  { categoryId: '010', categoryName: '粘结剂及用品' },
  { categoryId: '01001', categoryName: '水泥' },
  // 更多类别...
]

产品数组 #

[
  { productNumber: '01001001', productName: '薄层灰浆及薄层抹灰用品A' },
  { productNumber: '01001002', productName: 'SERVALAC AQUA BLANK - 停产' },
  // 更多产品...
]

期望结果 #

[
  {
    "id":"01",
    "categoryName":"建筑材料",
    "items":[
      {
        "id":"010",
        "categoryName":"粘结剂及用品",
        "items": [
          {
            "id":"01001",
            "categoryName":"水泥",
            "products": [
              {
                "productNumber":"01001001",
                "productName":"薄层灰浆及薄层抹灰用品A"
              },
              {
                "productNumber":"01001002",
                "productName":"SERVALAC AQUA BLANK - 停产"
              }
            ]
          }
        ]
      }
    ]
  }
]

解决方案 #

核心思路是先建立类别ID的映射表，快速关联父级与子级类别，再批量分配产品到对应三级类别，最后组装成嵌套结构，避免嵌套循环的低效问题。

代码实现 #

// 1. 处理类别数组，建立ID映射表，并初始化子项/产品列表
const categoryMap = {};
categories.forEach(category => {
  categoryMap[category.categoryId] = {
    id: category.categoryId,
    categoryName: category.categoryName,
    // 三级类别用products数组，二级和主类别用items数组
    ...(category.categoryId.length === 5 ? { products: [] } : { items: [] })
  };
});

// 2. 将子类别挂载到对应父类别下
categories.forEach(category => {
  const catId = category.categoryId;
  let parentId;
  if (catId.length === 3) {
    // 二级类别父ID为前2位编码
    parentId = catId.slice(0, 2);
  } else if (catId.length === 5) {
    // 三级类别父ID为前3位编码
    parentId = catId.slice(0, 3);
  }
  if (parentId && categoryMap[parentId]) {
    categoryMap[parentId].items.push(categoryMap[catId]);
  }
});

// 3. 分配产品到对应三级类别
products.forEach(product => {
  // 取产品编号前5位匹配三级类别ID
  const targetCatId = product.productNumber.slice(0, 5);
  if (categoryMap[targetCatId]) {
    categoryMap[targetCatId].products.push(product);
  }
});

// 4. 提取所有主类别（ID长度为2）作为最终结果
const result = Object.values(categoryMap).filter(cat => cat.id.length === 2);

console.log(result);

思路解析 #

• 映射表优化：用对象存储类别，将类别查找的时间复杂度从嵌套循环的O(n²)降到O(n)，大幅提升效率
• 层级自动关联：根据类别ID的长度规则，自动计算父类别ID，无需手动维护层级关系
• 批量产品分配：直接通过产品编号前缀匹配三级类别，快速完成产品归类
• 结果提取：过滤出所有主类别，直接得到完整的嵌套层级结构

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