企业官网建设流程全解析

概述

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

效果图

函数接口

functionaddSelectorAndIsable(currentSkuNameArr,productsSpecVoList,skuList){returnproductsSpecVoList.map((spec,specIndex)=>{return{...spec,specOptionVoList:spec.specOptionVoList.map(option=>{constobj=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],}})};});}

参数说明

返回值说明

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

代码逻辑详解

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

constobj=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展示选中状态。

完整示例

constcurrentSku=["黑色","256G"];constspecs=[{specName:"颜色",specOptionVoList:[{optionValue:"黑色"},{optionValue:"白色"}]},{specName:"内存",specOptionVoList:[{optionValue:"128G"},{optionValue:"256G"}]}];constskus=[{combinationValue:"黑色-256G"},{combinationValue:"白色-128G"}];constresult=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调用，减少服务器压力
• 实时响应：用户选择规格时立即反馈可用状态
• 易于维护：逻辑清晰，代码结构简单，便于后续维护和扩展
• 性能优化：使用数组操作和深拷贝，确保数据处理的准确性和效率