企业官网建设流程全解析

电商系统中商品多规格选项（颜色、容量、版本等）的组合问题，核心算法是「笛卡尔积（Cartesian Product）」；如果涉及「过滤无效组合（比如某颜色无某容量）」「关联SKU/价格/库存」，则是在笛卡尔积基础上叠加「组合过滤/映射」逻辑，属于笛卡尔积的业务扩展。

一、先通俗理解：笛卡尔积就是「所有可能的组合」

笛卡尔积的本质是：多个集合中，取出每个集合的一个元素，组成所有可能的有序组合。
对应电商场景：

• 每个规格维度（颜色、容量）是一个「集合」；
• 每个集合里的选项（比如颜色集合：红、蓝；容量集合：128G、256G）是集合的元素；
• 笛卡尔积就是把这些维度的元素两两/多多搭配，生成所有可能的规格组合。

举例：2个维度的笛卡尔积

笛卡尔积结果（所有组合）：
[红色+128G, 红色+256G, 蓝色+128G, 蓝色+256G]

举例：3个维度的笛卡尔积（颜色+容量+版本）

笛卡尔积结果（共2×2×2=8种）：
[红+128G+标准版, 红+128G+顶配版, 红+256G+标准版, 红+256G+顶配版, 蓝+128G+标准版, 蓝+128G+顶配版, 蓝+256G+标准版, 蓝+256G+顶配版]

二、笛卡尔积的核心实现（代码示例）

下面用JavaScript实现通用的多维度规格组合生成，适配任意数量的维度（颜色、容量、版本等）：

/** * 生成多维度规格的笛卡尔积 * @param {Object} specs - 规格维度集合，比如 { color: ['红','蓝'], capacity: ['128G','256G'] } * @returns {Array} 所有规格组合（对象形式） */functioncartesianProduct(specs){// 1. 提取所有维度的key和对应的选项数组constdims=Object.keys(specs);// ['color', 'capacity']constvalues=dims.map(key=>specs[key]);// [['红','蓝'], ['128G','256G']]// 2. 初始化结果：初始为[{}]（空组合）letresult=[{}];// 3. 遍历每个维度，叠加组合for(leti=0;i<values.length;i++){consttemp=[];constdimKey=dims[i];// 当前维度（比如color）constdimValues=values[i];// 当前维度的选项（比如['红','蓝']）// 遍历已有结果，和当前维度的每个选项组合for(constprevofresult){for(constvalofdimValues){temp.push({...prev,[dimKey]:val});}}result=temp;}returnresult;}// 测试：2个维度constspecs={color:['红色','蓝色'],capacity:['128G','256G']};console.log(cartesianProduct(specs));// 输出：// [// { color: '红色', capacity: '128G' },// { color: '红色', capacity: '256G' },// { color: '蓝色', capacity: '128G' },// { color: '蓝色', capacity: '256G' }// ]// 测试：3个维度constspecs3={color:['红','蓝'],capacity:['128G','256G'],version:['标准版','顶配版']};console.log(cartesianProduct(specs3));// 输出8种组合

三、电商实际场景的扩展（笛卡尔积+业务逻辑）

纯笛卡尔积会生成「所有理论组合」，但电商中很多组合是无效的（比如“红色+512G”无库存、“蓝色+128G”已下架），因此需要在笛卡尔积基础上做扩展：

1. 过滤无效组合

生成笛卡尔积后，结合后台SKU数据过滤掉「无库存/已下架/不支持」的组合：

// 假设后台返回的有效SKU列表（每个SKU对应一个有效组合+价格/库存）constvalidSKUs=[{color:'红色',capacity:'128G',price:2999,stock:100},{color:'红色',capacity:'256G',price:3499,stock:50},{color:'蓝色',capacity:'256G',price:3499,stock:80}];// 生成所有笛卡尔积组合后，过滤出有效组合constallCombos=cartesianProduct(specs);constvalidCombos=allCombos.filter(combo=>{// 匹配有效SKU（按维度字段匹配）returnvalidSKUs.some(sku=>{returnsku.color===combo.color&&sku.capacity===combo.capacity;});});console.log(validCombos);// 输出：排除了「蓝色+128G」，只保留3个有效组合

2. 关联SKU属性（价格、库存、SKU ID）

每个有效组合对应一个唯一SKU，用户选择组合后，需映射到对应的SKU信息：

// 用户选择的组合constuserSelected={color:'红色',capacity:'128G'};// 找到对应的SKUconstmatchedSKU=validSKUs.find(sku=>{returnsku.color===userSelected.color&&sku.capacity===userSelected.capacity;});console.log(matchedSKU);// 输出：{ color: '红色', capacity: '128G', price: 2999, stock: 100 }

3. 优化：避免组合数爆炸（维度多的场景）

如果维度多（比如颜色5种+容量4种+版本3种+套餐2种），笛卡尔积会生成 5×4×3×2=120 种组合，前端渲染/处理会卡顿，优化方案：

• 懒生成：先只渲染单个维度的选项，用户选完一个维度后，再生成下一个维度的「可选选项」（比如用户选“红色”，再查红色支持的容量，而非一次性生成所有）；
• 后端预计算：把所有有效组合提前存在数据库，前端只请求「当前已选维度下的可选选项」（比如选了红色，后端返回红色支持的容量：128G、256G）。

四、总结

1. 核心算法：商品多规格组合的基础是「笛卡尔积」，负责生成所有理论上的维度组合；
2. 业务扩展：实际电商中需叠加「组合过滤」（剔除无效组合）、「SKU映射」（关联价格/库存）；
3. 性能优化：维度多的时候，通过「懒生成」「后端预计算」避免组合数爆炸。

这个逻辑是电商SKU管理的核心，几乎所有电商平台（淘宝、京东、拼多多）的商品规格选择，底层都是笛卡尔积+业务过滤的思路。