生成商品有效规格组合需先解析specs与skus数据，基于skus反推各规格维度的有效值，再通过联动筛选动态禁用无效选项，最终按所选value_id精准匹配唯一SKU。
处理商城商品规格数据并生成所有有效组合，核心是理解规格的嵌套结构、去重校验、排除无效搭配（比如库存为0或不支持的组合），再用笛卡尔积算法生成可选组合。下面分几步说明实际做法。
识别规格数据结构
接口通常返回类似这样的规格数据：
{
"specs": [
{
"spec_id": "1",
"spec_name": "颜色",
"values": [
{"value_id": "101", "value_name": "红色", "stock": 5},
{"value_id": "102", "value_name": "蓝色", "stock": 0}
]
},
{
"spec_id": "2",
"spec_name": "尺寸",
"values": [
{"value_id": "201", "value_name": "M", "stock": 3},
{"value_id": "202", "value_name": "L", "stock": 8}
]
}
],
"skus": [
{
"sku_id": "s1",
"spec_value_ids": ["101", "201"],
"price": 99.9,
"stock": 3
},
{
"sku_id": "s2",
"spec_value_ids": ["101", "202"],
"price": 109.9,
"stock": 8
}
]
}
注意：不能直接对所有规格值做全量笛卡尔积，必须依据 skus 数组中真实存在的组合 来反推哪些组合有效 —— 因为有些规格理论上可选，但实际没上架对应 SKU（如“蓝色+M”可能根本没生产）。
提取有效规格值映射表
遍历 skus，构建每个规格维度下「实际可用的值」及其关联信息：
立即学习“Java免费学习笔记（深入）”；
- 用
Map或对象按spec_id分组，记录每个value_id是否在任一有效 SKU 中出现过 - 同时收集该值在各 SKU 中的最小库存、价格区间等（便于后续展示缺货/起售价）
- 过滤掉完全没出现在任何 SKU 中的规格值（例如上面的 “蓝色” 虽然在 specs 里，但没在 skus 的
spec_value_ids中出现，应禁用）
生成前端可交互的规格树
用户点击某个规格项时，需动态禁用/启用其余规格的可选项（即“联动筛选”）。实现逻辑如下：
- 维护一个当前已选规格值的数组，如
selected = [{spec_id: "1", value_id: "101"}] - 根据
selected和全部skus，找出剩余未选规格中「仍有可能组成有效 SKU」的值 - 例如已选 “红色”，则检查所有含 “101” 的 SKU，取出它们涉及的 “尺寸” 值（即 201、202），其他尺寸值（如存在 203）就置灰不可点
- 推荐封装成函数
getAvailableValues(specId, selected)，内部用skus.filter(...).flatMap(...)提取交集
确定最终 SKU 并提交
当用户选齐所有规格项后，需精准匹配到唯一 SKU：
- 将所选
value_id按spec_id排序（确保顺序与后台一致），生成 key 数组，如["101", "202"] - 遍历
skus，用JSON.stringify(sku.spec_value_ids) === JSON.stringify(selectedIds)或更稳妥的every()对比 - 匹配成功则获取
sku_id、价格、库存；失败则提示“该组合暂不可用”（避免前端强行组合导致下单异常）
