本文作者： 伯乐在线 - keelii 。未经作者许可，禁止转载！欢迎加入伯乐在线 专栏作者。
问题描述
这个问题来源于选择商品属性的场景。比如我们买衣服、鞋子这类物件，一般都需要我们选择合适的颜色、尺码等属性
先了解一下 sku 的学术概念吧
最小库存管理单元（Stock Keeping Unit, SKU）是一个会计学名词，定义为库存管理中的最小可用单元，例如纺织品中一个SKU通常表示规格、颜色、款式，而在连锁零售门店中有时称单品为一个SKU。最小库存管理单元可以区分不同商品销售的最小单元，是科学管理商品的采购、销售、物流和财务管理以及POS和MIS系统的数据统计的需求，通常对应一个管理信息系统的编码。 —— form wikipedia 最小存货单位
简单的结合上面的实例来说： sku 就是你上购物网站买到的最终商品，对应的上图中已选择的属性是：颜色 黑色 – 尺码 37
我先看看后端数据结构一般是这样的，一个线性数组，每个元素是一个描述当前 sku 的 map，比如：
[
{ "颜色": "红", "尺码": "大", "型号": "A", "skuId": "3158054" },
{ "颜色": "白", "尺码": "中", "型号": "B", "skuId": "3133859" },
{ "颜色": "蓝", "尺码": "小", "型号": "C", "skuId": "3516833" }
]
12345
[ { "颜色": "红", "尺码": "大", "型号": "A", "skuId": "3158054" }, { "颜色": "白", "尺码": "中", "型号": "B", "skuId": "3133859" }, { "颜色": "蓝", "尺码": "小", "型号": "C", "skuId": "3516833" }]
前端展示的时候显然需要 group 一下，按不同的属性分组，目的就是让用户按属性的维度去选择，group 后的数据大概是这样的：
{
"颜色": ["红", "白", "蓝"],
"尺码": ["大", "中", "小"],
"型号": ["A", "B", "C"]
}
12345
{ "颜色": ["红", "白", "蓝"], "尺码": ["大", "中", "小"], "型号": ["A", "B", "C"]}
对应的在网页上大概是这样的 UI
这个时候，就会有一个问题，这些元子属性能组成的集合（用户的选择路径） 远远大于 真正可以组成的集合，比如上面的属性集合可以组合成一个 笛卡尔积，即。可以组合成以下序列：
[
["红", "大", "A"], // ?
["红", "大", "B"],
["红", "大", "C"],
["红", "中", "A"],
["红", "中", "B"],
["红", "中", "C"],
["红", "小", "A"],
["红", "小", "B"],
["红", "小", "C"],
["白", "大", "A"],
["白", "大", "B"],
["白", "大", "C"],
["白", "中", "A"],
["白", "中", "B"], // ?
["白", "中", "C"],
["白", "小", "A"],
["白", "小", "B"],
["白", "小", "C"],
["蓝", "大", "A