TypeScript中Carts数组与产品字典映射时筛选逻辑实现问题

问题场景 #

• 存在Carts数组，每个元素包含id、name、products等属性
• 存在字典结构content.data，键为类型值，值为对应分类的产品集合

现有代码 #

你目前编写的卡壳的代码片段如下：

carts.forEach(cart => {
    const productList = cart.products; //list of products

    Object.entries(content.data).forEach(([key, values]) => {
      const sizeList = values.map(x => x.sizeList); //list of size
      // i am stuck here
    });
  });

补全实现 #

常规需求下你应该是要给购物车内的产品匹配对应分类的元数据（比如可用尺寸、分类标识等），可以按如下逻辑实现，提前做索引避免重复计算提升性能：

// 提前构建分类映射索引，减少循环内重复运算
const categoryIndex = Object.fromEntries(
  Object.entries(content.data).map(([categoryId, categoryProducts]) => {
    // 整理当前分类下所有可用尺寸，自动去重
    const availableSizes = [...new Set(categoryProducts.flatMap(item => item.sizeList))]
    return [categoryId, {
      productList: categoryProducts,
      sizeList: availableSizes
    }]
  })
)

// 遍历所有购物车完成映射，这里用map生成新数组避免修改原数据，你也可以用forEach直接修改
const processedCarts = carts.map(cart => {
  const processedProducts = cart.products.map(product => {
    // 按产品分类匹配对应索引，这里假设产品的category字段和content.data的key对应，可按需调整匹配字段
    const matchedCategory = categoryIndex[product.category]
    if (!matchedCategory) return product
    // 构造你需要的映射字段，可按需调整输出结构
    return {
      ...product,
      categoryId: product.category,
      availableSizes: matchedCategory.sizeList,
      categoryProductInfo: matchedCategory.productList.find(item => item.id === product.id)
    }
  })
  return {
    ...cart,
    products: processedProducts
  }
})

调整说明 #

如果你的匹配规则和输出结构和上述默认假设不同，只需修改两处即可：

1. 调整categoryIndex[product.category]的匹配逻辑，换成你实际用来关联产品和分类的字段
2. 调整return部分的字段构造规则，输出你需要的结构即可

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