如何编写支持n种变体的笛卡尔积函数生成按钮组件模板？

给定定义组件变体的对象（如按钮的colorMode和size可选值），我们可以通过两步实现可复用的解决方案：先生成所有变体的笛卡尔积组合，再将组合转换为目标模板字符串。

1. 核心笛卡尔积生成函数 #

这个函数接收任意结构的变体对象（支持n种变体），返回所有可能的键值对组合数组：

function getCartesianProduct(variants) {
  const entries = Object.entries(variants);
  let product = [{}];

  for (const [key, values] of entries) {
    product = product.flatMap(combination => 
      values.map(value => ({ ...combination, [key]: value }))
    );
  }

  return product;
}

2. 按钮模板生成函数 #

基于笛卡尔积结果，将每个组合转换为<button>模板字符串：

function generateButtonTemplates(variants) {
  const combinations = getCartesianProduct(variants);
  
  return combinations.map(combination => {
    const attributes = Object.entries(combination)
      .map(([key, value]) => `${key}="${value}"`)
      .join(' ');
    return `<button ${attributes}>button</button>`;
  });
}

测试使用 #

用你提供的buttonVariants测试：

const buttonVariants = {
  colorMode: ['on-dark','on-light'],
  size: ['small','medium','large']
};

// 输出期望的模板数组
console.log(generateButtonTemplates(buttonVariants));

这个方案完全支持扩展任意数量的变体，比如新增shape: ['round', 'square']，函数会自动生成包含该属性的所有组合模板。

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