面试官说有一个业务场景，比如某件商品的子类型有三项，尺码、颜色、类型。
用户点击这三项没有顺序，有可能先点尺码再点别的，也有可能先点颜色。
但是每点击一项后，其它两项都会跟着改变。

比如先点了M尺码后，颜色里断货的置灰，类型里断货的也置灰。

再点颜色里的红色，范围会继续缩小，尺码里断货的置灰，类型里断货的也置灰。

最后点类型里的某项，尺码和颜色断货的也会置灰。

1. 前端需要后端返回什么样的数据结构比较好？
2. 每次点击前端这边怎么处理逻辑？

类似于图片上的业务场景，虽然图片上只有两项，面试官问的三项更复杂

求大佬解答，谢谢

有现成的可以参考
vant sku 对象结构

{
    spec : [
        {
            code : 'size',
            label : '尺码',
            map : {
                'S' : '小码',
                'M' : '中码',
                'L' : '大码',
                'XL' : '加大码',
            },
        },
        {
            code : 'color',
            label : '颜色',
            map : {
                'red': '红色',
                'white' : '白色',
                'black' : '黑色',
            },
        },
    ],
    item : {
        'S-red' : {
            'label' : '小码-红色',
            'price' : 15.00,
            'stock' : 20,
        },
        'L-white' : {
            'label' : '大码-白色',
            'price' : 15.00,
            'stock' : 5,
        },
    },
}

spec 是规格，数组顺序是和下面 item 的键值拼接顺序一致
size 是 spec 第一项，color是 spec 第二项
item 的键值按上面的顺序进行拼接，必须保持一致顺序

spec 规格项组合 键值在 item 里不存在的就是没有这个组合类型的商品，键值存在，但 stock 是0，就是没有库存

1. 其实不需要很复杂的数据结构
2. 就拿图中的场景举例，上下一乘 120，每次都全遍历也是 ms 级的运算量。即使再加一个维度，10个选项，1200 的 sku，也一样。
3. 综上所述，因为场景本身的限制，没有很好的答案