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

概述SKUStock Keeping Unit是商品库存管理的最小单位在电商系统中尤为重要。本文档介绍了一种纯前端实现SKU组合选择的方法通过JavaScript动态计算商品规格的可用性和选择状态。效果图函数接口functionaddSelectorAndIsable(currentSkuNameArr,productsSpecVoList,skuList){returnproductsSpecVoList.map((spec,specIndex){return{...spec,specOptionVoList:spec.specOptionVoList.map(option{constobjJSON.parse(JSON.stringify(currentSkuNameArr));obj.splice(specIndex,1,option.optionValue)return{...option,disalbed:!skuList.some(ii.combinationValueobj.join(-)),selector:option.optionValuecurrentSkuNameArr[specIndex],}})};});}参数说明参数类型说明currentSkuNameArrArray当前已选择的SKU组合值数组productsSpecVoListArray商品规格列表包含所有规格选项信息skuListArray可用的SKU列表包含有效的SKU组合返回值说明disabled (Boolean)标识当前选项是否可用当对应的SKU组合不存在时为trueselector (Boolean)标识当前选项是否为当前已选中的选项代码逻辑详解1. 深拷贝当前选择的SKU组合constobjJSON.parse(JSON.stringify(currentSkuNameArr));首先对当前已选择的SKU组合进行深拷贝避免直接修改原始数据确保数据一致性。2. 构建临时SKU组合obj.splice(specIndex,1,option.optionValue)在数组的指定位置specIndex插入当前正在处理的选项值构建临时的SKU组合。这种方式确保了组合的完整性。3. 检查SKU组合有效性!skuList.some(ii.combinationValueobj.join(-))检查构建的临时SKU组合是否存在于可用的SKU列表中使用join(-)将数组转换为组合字符串格式通过some()方法在SKU列表中查找匹配项使用!操作符将结果转换为布尔值不存在时返回true4. 设置选择状态selector:option.optionValuecurrentSkuNameArr[specIndex]判断当前选项是否为当前已选中的选项用于UI展示选中状态。完整示例constcurrentSku[黑色,256G];constspecs[{specName:颜色,specOptionVoList:[{optionValue:黑色},{optionValue:白色}]},{specName:内存,specOptionVoList:[{optionValue:128G},{optionValue:256G}]}];constskus[{combinationValue:黑色-256G},{combinationValue:白色-128G}];constresultaddSelectorAndIsable(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调用减少服务器压力实时响应用户选择规格时立即反馈可用状态易于维护逻辑清晰代码结构简单便于后续维护和扩展性能优化使用数组操作和深拷贝确保数据处理的准确性和效率