如何将多组不同长度的Options取值组合生成扁平化的结果数组

问题背景 #

存在多个长度不固定的父级数组，统一称为Options，每个Option下包含长度同样可变的values取值数组，结构示例如下：

[
  {
    name: "Option 1",
    values: ["Blue","Red","Orange"]
  },
  {
    name: "Option 2",
    values: ["Small","Medium","Large"]
  },
  {
    name: "Option 3",
    values: ["Cotton","Satin"]
  }
]

需求说明 #

需要将所有Options下的values取值做全组合，生成符合以下结构的结果数组：

• 每个结果项的title字段由单个组合内的所有取值用/拼接而成
• 每个结果项的price字段可统一设置默认值
  结果示例如下：

[
  {
    title: "Blue/Small/Cotton",
    price: "10.00"
  },
  {
    title: "Blue/Small/Satin",
    price: "10.00"
  },
  {
    title: "Blue/Medium/Cotton",
    price: "10.00"
  },
  {
    title: "Blue/Medium/Satin",
    price: "10.00"
  },
  // 剩余所有组合以此类推
]

实现方案 #

直接遍历map无法适配Options数量、每个values长度不确定的场景，可通过reduce搭配flatMap实现通用的全组合计算，完整实现代码如下：

// 第一步：计算所有values的全组合
const valueCombinations = product.options.reduce(
  (acc, currentOption) => acc.flatMap(combination => currentOption.values.map(value => [...combination, value])),
  [[]]
);

// 第二步：将组合转换为目标结构，统一设置默认价格
const DEFAULT_PRICE = "10.00";
const result = valueCombinations.map(combination => ({
  title: combination.join('/'),
  price: DEFAULT_PRICE
}));

方案说明 #

• reduce初始值设置为[[]]，保证第一轮计算就能和第一个Option的values完成组合
• flatMap会自动抹平每次组合产生的嵌套数组，无需额外处理层级
• 方案完全不限制Options的数量、每个Option的values长度，可适配任意多属性组合场景

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