JS/TS实现根据用户所选商品属性匹配SKU获取价格库存

核心逻辑是遍历所有有效SKU，校验SKU的属性集合是否和用户选中的属性集合完全匹配，即可拿到对应价格、库存信息。

实现代码 #

JavaScript 版本 #

// 替换为你持有的完整规格组合数据
const skuList = [
  // 此处放入你提供的完整JSON规格数组即可
]

/**
 * 根据选中的属性值ID匹配对应SKU
 * @param {Array} skuData 全量有效规格列表
 * @param {number[]} selectedIds 用户选中的属性值ID集合
 * @returns 匹配到的SKU对象，无匹配项返回undefined
 */
function findMatchedSku(skuData, selectedIds) {
  const selectedIdSet = new Set(selectedIds)
  return skuData.find(sku => {
    const skuAttributeIds = sku.options.map(option => option.attribute_value_id)
    // 双重校验：属性数量一致 + 所有选中ID都存在于当前SKU属性中，避免多规格维度下错配
    return selectedIds.length === skuAttributeIds.length && skuAttributeIds.every(id => selectedIdSet.has(id))
  })
}

// 业务调用示例：选中Blue(id=3)、L码(id=35)
const targetSku = findMatchedSku(skuList, [3, 35])
if (targetSku) {
  // 取到对应业务数据
  const currentPrice = targetSku.price
  const currentStock = targetSku.stock
  // 后续渲染、加购逻辑直接用这两个值即可，示例数据下返回price=401、stock=37
} else {
  // 无匹配规格的业务逻辑，比如提示「当前属性组合无货」
}

TypeScript 版本 #

在JS逻辑基础上补充类型定义，和你现有数据结构完全对齐：

interface AttributeDetail {
  id: number
  name: string
}

interface AttributeOption {
  attribute_value_id: number
  attribute_value_name: string
  attribute_id: number
  attribute_name: string
  disabled: boolean
  attribute: AttributeDetail[]
}

interface SkuItem {
  id: number
  price: number
  stock: number
  options: AttributeOption[]
}

function findMatchedSku(skuData: SkuItem[], selectedIds: number[]): SkuItem | undefined {
  const selectedIdSet = new Set(selectedIds)
  return skuData.find(sku => {
    const skuAttributeIds = sku.options.map(option => option.attribute_value_id)
    return selectedIds.length === skuAttributeIds.length && skuAttributeIds.every(id => selectedIdSet.has(id))
  })
}

// 调用逻辑和JS版本完全一致

逻辑说明 #

• 用Set存储选中的属性ID，做包含校验时时间复杂度为O(1)，比数组includes的O(n)性能更好，SKU量级大时优势明显
• 增加属性长度校验，是为了兼容后续商品新增规格维度（比如新增「材质」属性）的场景，避免出现跨维度错配
• 如果你的业务需要支持「选了部分属性就筛选可选规格」的场景，直接去掉长度判断即可，逻辑会自动适配为「包含所有已选属性的SKU均视为匹配」

内容的提问来源于stack exchange，提问作者Moisés Guzmán