商城SKU实现（纯前端计算）

概述

SKU（Stock Keeping Unit）是商品库存管理的最小单位，在电商系统中尤为重要。本文档介绍了一种纯前端实现SKU组合选择的方法，通过JavaScript动态计算商品规格的可用性和选择状态。

效果图

函数接口

function addSelectorAndIsable(currentSkuNameArr, productsSpecVoList, skuList) {
  return productsSpecVoList.map((spec, specIndex) => {
    return {
      ...spec,
      specOptionVoList: spec.specOptionVoList.map(option => {
        const obj = JSON.parse(JSON.stringify(currentSkuNameArr));
        obj.splice(specIndex, 1, option.optionValue)
        return {
          ...option,
          disalbed: !skuList.some(i => i.combinationValue == obj.join('-')),
          selector: option.optionValue === currentSkuNameArr[specIndex],
        }
      })
    };
  });
}

参数说明

参数	类型	说明
currentSkuNameArr	Array	当前已选择的SKU组合值数组
productsSpecVoList	Array	商品规格列表，包含所有规格选项信息
skuList	Array	可用的SKU列表，包含有效的SKU组合

返回值说明

• disabled (Boolean)：标识当前选项是否可用，当对应的SKU组合不存在时为true
• selector (Boolean)：标识当前选项是否为当前已选中的选项

代码逻辑详解

1. 深拷贝当前选择的SKU组合

const obj = JSON.parse(JSON.stringify(currentSkuNameArr));

首先对当前已选择的SKU组合进行深拷贝，避免直接修改原始数据，确保数据一致性。

2. 构建临时SKU组合

obj.splice(specIndex, 1, option.optionValue)

在数组的指定位置（specIndex）插入当前正在处理的选项值，构建临时的SKU组合。这种方式确保了组合的完整性。

3. 检查SKU组合有效性

!skuList.some(i => i.combinationValue == obj.join('-'))

检查构建的临时SKU组合是否存在于可用的SKU列表中：

• 使用 join('-') 将数组转换为组合字符串格式
• 通过 some() 方法在SKU列表中查找匹配项
• 使用 ! 操作符将结果转换为布尔值，不存在时返回true

4. 设置选择状态

selector: option.optionValue === currentSkuNameArr[specIndex]

判断当前选项是否为当前已选中的选项，用于UI展示选中状态。

完整示例

const currentSku = ["黑色", "256G"];
const specs = [
  {
    specName: "颜色",
    specOptionVoList: [
      { optionValue: "黑色" },
      { optionValue: "白色" }
    ]
  },
  {
    specName: "内存",
    specOptionVoList: [
      { optionValue: "128G" },
      { optionValue: "256G" }
    ]
  }
];
const skus = [
  { combinationValue: "黑色-256G" },
  { combinationValue: "白色-128G" }
];

const result = addSelectorAndIsable(currentSku, specs, skus);
// 输出结果
// [
//   {
//     specName: "颜色",
//     specOptionVoList: [
//       { optionValue: "黑色", disabled: false, selector: true },
//       { optionValue: "白色", disabled: true, selector: false }
//     ]
//   },
//   {
//     specName: "内存",
//     specOptionVoList: [
//       { optionValue: "128G", disabled: true, selector: false },
//       { optionValue: "256G", disabled: false, selector: true }
//     ]
//   }
// ]

应用场景

• 商品详情页：实现商品规格选择功能，确保用户只能选择有效的SKU组合
• 购物车逻辑：验证用户选择的商品SKU是否存在可用库存
• 价格计算：根据选择的SKU组合动态计算商品价格
• 库存管理：实时显示不同规格的库存状态

实现优势

• 纯前端实现：无需后端API调用，减少服务器压力
• 实时响应：用户选择规格时立即反馈可用状态
• 易于维护：逻辑清晰，代码结构简单，便于后续维护和扩展
• 性能优化：使用数组操作和深拷贝，确保数据处理的准确性和效率