1、什么是SKU？

2、什么是笛卡尔积？

3、SKU组合代码实现思路

4、SKU选择代码实现思路

什么是SKU？

SKU（Stock Keeping Unit）最小存货单位。

例如我们在某购物APP上选购一款Mac电脑，可以选择颜色、内存、以及其他的一些销售属性。

这些销售属性的组合，比如深空灰16G+512G官方标配版，就可以作为这个商品库存及发货的标准，也就是我们说的一个SKU 如果你明白了SKU的概念，那接下来看看这个例子，这个商品一共有几个SKU？

我是一条分割线

一共是10个SKU，你答对了么？

根据这个商品的尺码和颜色，我们可以得到10种[尺码X颜色]的组合，分别是

[XS黑色，XS军绿色，S黑色，S军绿色，M黑色，M军绿色，L黑色，L军绿色，XL黑色，XL军绿色]

这些SKU组合，我们可以通过笛卡尔积来得到。那么什么是笛卡尔积？

笛卡尔积

在数学中，笛卡尔积是一种对集合的运算。

假设有集合A， 集合B，用A中的元素作为第一个元素，用B中的元素作为第二个元素构成的有序对，所有这样的有序对的集合叫做A和B的笛卡尔积，记作AxB

用符号来表示记为：A×B={(x,y)|x∈A∧y∈B}

例如：A={a, b}, B={1,2,3}

用集合A中的a作为第一个元素，集合B中的1作为第二个元素，得到(a,1)

用集合A中的a作为第一个元素，集合B中的2作为第二个元素，得到(a,2)

用集合A中的a作为第一个元素，集合B中的3作为第二个元素，得到(a,3)

用集合A中的b作为第一个元素，集合B中的1作为第二个元素，得到(b,1)

用集合A中的b作为第一个元素，集合B中的2作为第二个元素，得到(b,2)

用集合A中的b作为第一个元素，集合B中的3作为第二个元素，得到(b,3)

最后我们得到AxB={(a,1),(a,2),(a,3),(b,1),(b,2),(b,3)}

是不是和我们上面计算SKU组合是一个意思呢？

SKU组合代码实现思路

现在基本的概念和组合方法我们都已经Get了，看下如何转变成代码，让计算机帮我们实现笛卡尔积

就以一个实际的例子来引入吧

现在 你是一个服装电商卖家，要上架一款大衣，这款大衣颜色有黑色，白色，灰色；长度有长款，短款；尺码有S，M，L，那么可能的SKU组合我们通过树状图画出来

我们先来用最简单粗暴的循环实现看看

const colors = ["黑色", "白色", "灰色"];
const length = ["长款", "短款"];
const size = ["S", "M", "L"];

// 获取SKU组合的方法
const getSkuList = () => {
  const result = [];
  colors.forEach((c) => {
    length.forEach((l) => {
      size.forEach((s) => {
        result.push([c, l, s]);
      });
    });
  });
  return result; // [["黑色","长款","S"],["黑色","长款","M"],["黑色","长款","L"],["黑色","短款","S"],["黑色","短款","M"],["黑色","短款","L"],["白色","长款","S"],["白色","长款","M"],["白色","长款","L"],["白色","短款","S"],["白色","短款","M"],["白色","短款","L"],["灰色","长款","S"],["灰色","长款","M"],["灰色","长款","L"],["灰色","短款","S"],["灰色","短款","M"],["灰色","短款","L"]]
};

确实结果是没问题的，但这种暴力循环没法应用到实际业务当中去。如果一个商品有10个销售属性，总不能写10层循环吧。况且我们会有各种不同的商品，不同的销售属性，不能像这样在for循环里把循环的数组定义死。

我们可以考虑借助reduce函数，将数组的每一项进行拼接操作，最终整合成一个结果

const colors = ["黑色", "白色", "灰色"];
const length = ["长款", "短款"];
const size = ["S", "M", "L"];

// 方法一
const getSkuList = (attrList) => {
  if (attrList.length < 2) return attrList[0] || [];
  return attrList.reduce((total, current) => {
    const res = [];
    total.forEach((t) => {
      current.forEach((c) => {
        const temp = Array.isArray(t) ? [...t] : [t];
        temp.push(c);
        res.push(temp);
      });
    });
    return res;
  });
}

// 方法二
const getSkuList2 = (attrList) => {
  return attrList.reduce(
    (total, current) => total.flatMap((t) => current.map((c) => [...t, c])),
    [[]]
  );
};


getSkuList([colors,length,size]); // [["黑色","长款","S"],["黑色","长款","M"],["黑色","长款","L"],["黑色","短款","S"],["黑色","短款","M"],["黑色","短款","L"],["白色","长款","S"],["白色","长款","M"],["白色","长款","L"],["白色","短款","S"],["白色","短款","M"],["白色","短款","L"],["灰色","长款","S"],["灰色","长款","M"],["灰色","长款","L"],["灰色","短款","S"],["灰色","短款","M"],["灰色","短款","L"]]

从树状图我们能看出来，从上往下到叶子结点的每一条路径，代表着一个SKU组合。其实还有点类似经典的回溯算法组合问题。

那我们再尝试使用回溯算法来实现一下。回溯算法的基本思想我在这里就不多做解释了，感兴趣的同学可以自行了解。

对于我们这个场景来说，回溯的“终止条件”就是当路径长度等于销售属性个数的时候，说明已经访问到叶子结点了，一个SKU组合成功，可以存放到结果中去。每一层的结点就是每一个销售属性的选项，例如第一层就是颜色，第二层是长度，第三层是尺码。我们看下代码如何实现的：

const colors = ["黑色", "白色", "灰色"];
const length = ["长款", "短款"];
const size = ["S", "M", "L"];

// 方法三
const getSkuList = (attrList) => {
  const result = [];
  const backTracking = (path, level) => {
    if (path.length === attrList.length) {
      result.push([...path]);
      return;
    }
    attrList[level].forEach((item) => {
      path.push(item);
      backTracking(path, level + 1);
      path.pop();
    });
  };
  backTracking([], 0);
  return result; 
};

getSkuList([colors,length,size]); // [["黑色","长款","S"],["黑色","长款","M"],["黑色","长款","L"],["黑色","短款","S"],["黑色","短款","M"],["黑色","短款","L"],["白色","长款","S"],["白色","长款","M"],["白色","长款","L"],["白色","短款","S"],["白色","短款","M"],["白色","短款","L"],["灰色","长款","S"],["灰色","长款","M"],["灰色","长款","L"],["灰色","短款","S"],["灰色","短款","M"],["灰色","短款","L"]]

SKU选择代码实现思路

前面我们实现了SKU组合的方法，主要适用于卖家后台系统，在创建商品时，编辑各SKU的信息。

在买家端，买家会选择自己需要的SKU，系统需要根据买家的选择，实时反馈对应SKU的价格、库存等信息。

服务端给到前端的信息是一个完整的SKU列表，数据结构类似这样, 数组里的每一条数据即为一个SKU，包含了SKU的唯一标识skuId, SKU的属性组成，SKU的库存和价格

[
  {
    skuId: "111",
    skuInfo: {
      color: "黑色",
      length: "长款",
      size: "S",
    },
    stock: 10,
    price: 10,
  },
  {
    skuId: "112",
    skuInfo: {
      color: "黑色",
      length: "长款",
      size: "M",
    },
    stock: 9,
    price: 9,
  },
  {
    skuId: "113",
    skuInfo: {
      color: "黑色",
      length: "长款",
      size: "L",
    },
    stock: 8,
    price: 8,
  },
  ...
]

以及一个完整的销售属性列表，数据结构类似这样：

[
  {
    label: "颜色",
    name: "color",
    options: [
      {
        value: "黑色",
      },
      {
        value: "白色",
      },
      {
        value: "灰色",
      },
    ],
  },
  {
    label: "长度",
    name: "length",
    options: [
      {
        value: "长款",
      },
      {
        value: "短款",
      },
    ],
  },
  {
    label: "尺码",
    name: "size",
    options: [
      {
        value: "S",
      },
      {
        value: "M",
      },
      {
        value: "L",
      },
    ],
  },
]

根据这个销售属性列表，我们很容易可以渲染出SKU选择的组件（Demo为React+antd实现）

<div className="main-content">
      <Form name="basic"> {attrs.map((attr) => { return ( <Form.Item key={attr.name} label={attr.label} name={attr.name}> <div className="form-content"> {attr.options.map((opt, index) => ( <Button key={index} type={ opt.value === selectedSku[attr.name] ? "primary" : "default" } className="opt" disabled={!isSkuValid(attr.name, opt.value)} onClick={() => onClick(attr.name, opt.value)} > {opt.value} </Button> ))} </div> </Form.Item> ); })} </Form>
    </div>

我们用一个对象来记录已选择的选项, 当点击选项时，更新selectedSku对象的值

  const [selectedSku, setSelectedSku] = useState({});

  const onClick = (attrKey, optValue) => {
    setSelectedSku({
      ...selectedSku,
      [attrKey]: selectedSku[attrKey] === optValue ? "" : optValue,
    });
  };

实际情况下，某些SKU存在无货的场景，那对应的按钮是置灰无法选择的。但是目前SKU组件是依靠销售属性列表渲染的，没有库存信息，也就是说，我们需要结合销售属性数组和SKU列表，去判断每一个选项是否可选。

  const isSkuValid = (attrKey, optValue) => {
    // 先假设当前属性值已选中，拼入已选对象里
    const tempSelectedSku = {
      ...selectedSku,
      [attrKey]: optValue,
    };
    // 过滤出已选对象中属性值不为空的
    const skuToBeChecked = Object.keys(tempSelectedSku).filter(
      (key) => tempSelectedSku[key] !== ""
    );

    // 在skuList里找到所有包含已选择属性的sku且库存>0的sku
    const filteredSkuList = skuList.filter((sku) =>
      skuToBeChecked.every(
        (skuKey) =>
          tempSelectedSku[skuKey] === sku.skuInfo[skuKey] && sku.stock > 0
      )
    );

    return filteredSkuList.length > 0;
  };

这样我们就实现了买家端SKU选择的功能。

总结

至此，卖家后台创建商品SKU及买家界面选择SKU的功能基本都已实现，有问题欢迎一起探讨