前言

做过电商项目前端售卖的应该都遇见过不同规格产品库存的计算问题，业界名词叫做sku(stock Keeping Unit)，库存量单元对应我们售卖的具体规格，比如一部手机具体型号规格，其中iphone6s 4G 红色就是一个sku。这里我们区别spu(Standard Product Unit)，标准化产品单元，比如一部手机型号iphone6s就是一个spu。

sku 算法

在前端展示商品时，根据用户选择的不同sku，我们需要计算出不同的库存量动态展示给用户，这里就衍生出了sku算法。

数据结构

我们先看看在后端服务器保存库存的数据结构一般是长怎么样的：

// 库存列表
const skuList = [
  {
    skuId: '0',
    skuGroup: ['红色', '大'],
    remainStock: 7,
    price: 2,
    picUrl: 'https://dummyimage.com/100x100/ff00b4/ffffff&text=大'
  },
  {
    skuId: '1',
    skuGroup: ['红色', '小'],
    remainStock: 3,
    price: 4,
    picUrl: 'https://dummyimage.com/100x100/ff00b4/ffffff&text=小'
  },
  {
    skuId: '2',
    skuGroup: ['蓝色', '大'],
    remainStock: 0,
    price: 0.01,
    picUrl: 'https://dummyimage.com/100x100/0084ff/ffffff&text=大'
  },
  {
    skuId: '3',
    skuGroup: ['蓝色', '小'],
    remainStock: 1,
    price: 1,
    picUrl: 'https://dummyimage.com/100x100/0084ff/ffffff&text=小'
  }
];

// 规格列表
const skuNameList = [
  {
    skuName: "颜色",
    skuValues: ["红色", "蓝色"]
  },
  {
    skuName: "尺寸",
    skuValues: ["大", "小"]
  }
];

算法演示

在前端用户选择单个规格或多个规格后，我们需要动态计算出此时其他按钮是否还能点击（组合有库存），以及当前状态对应的总库存量，封面图和价格区间。

以上面的数据举个