如何用JavaScript基于基本计数原理生成产品变体全组合

问题描述 #

我有三个存储不同产品属性的数组：

const colors = ['black','red','yellow'];
const sizes = ['s','m','l','xl','2xl','3xl'];
const status = ['used','new'];

需要基于基本计数原理，用JavaScript生成所有可能的产品变体组合，期望输出是包含所有组合的字符串数组，示例如下：

[
    'black,s,used',
    'black,s,new',
    'black,m,used',
    // ... 中间省略其他组合
    'yellow,3xl,new'
]

我之前尝试的代码无法得到预期结果：

let array1=['black','red','yellow'];
let array2=['s','m','l','xl','2xl','3xl'];
let array3=['used','new'];
var all=[];
all.push(colors.toString());
all.push(sizes.toString());
all.push(status.toString())
for (var i = 1; i <= 3; i++) {
    
console.log(option);
}

解决方案 #

方法1：嵌套循环（适用于固定数量的数组） #

直接通过三层嵌套循环遍历每个数组的元素，将组合拼接成目标格式的字符串后存入结果数组，逻辑直观易懂：

const colors = ['black','red','yellow'];
const sizes = ['s','m','l','xl','2xl','3xl'];
const status = ['used','new'];

const combinations = [];

// 遍历所有颜色
for (const color of colors) {
  // 遍历所有尺寸
  for (const size of sizes) {
    // 遍历所有状态
    for (const stat of status) {
      combinations.push(`${color},${size},${stat}`);
    }
  }
}

console.log(combinations);

这段代码会生成所有3×6×2=36种组合，完全符合预期输出。

方法2：通用递归方法（支持任意数量的数组） #

如果以后需要处理更多属性数组，递归方法无需修改循环层数，扩展性更强：

const generateCombinations = (arrays) => {
  // 递归终止条件：只剩一个数组时，直接返回每个元素的数组
  if (arrays.length === 1) {
    return arrays[0].map(item => item);
  }
  
  // 取出第一个数组，递归处理剩余数组的组合
  const firstArray = arrays[0];
  const restCombinations = generateCombinations(arrays.slice(1));
  
  // 将第一个数组的每个元素和剩余组合拼接
  return firstArray.flatMap(item => {
    return restCombinations.map(comb => `${item},${comb}`);
  });
};

// 使用示例
const colors = ['black','red','yellow'];
const sizes = ['s','m','l','xl','2xl','3xl'];
const status = ['used','new'];

const combinations = generateCombinations([colors, sizes, status]);
console.log(combinations);

这个方法可以接收任意数量的数组参数，自动生成所有笛卡尔积组合。

原代码问题分析 #

你之前的代码存在几个核心问题：

1. 错误地将整个数组转为字符串推入all数组，没有实现元素级别的组合
2. 循环逻辑缺失，没有遍历元素进行组合拼接
3. 变量option未定义，会导致控制台报错

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