sku组合查询算法探讨-之JS实现示例


/* 后端数据 */
var data = {
    "10;20;30": {
        price: 5,
        count: 1
    },
    "10;20;31": {
        price: 10,
        count: 2
    },
    "11;20;30": {
        price: 5,
        count: 1
    },
    "10;21;31": {
        price: 10,
        count: 2
    },
    "10;21;32": {
        price: 10,
        count: 9
    }
}

var myData = {},

    //可选项key值
    keys = [
        [10, 11, 12],
        [20, 21],
        [30, 31, 32]
        ];

//获取 key的库存量

function getNum(key) {
    var result = 0,

        i, j, m,

        items, n = [];

    //检查是否已计算过
    if (typeof myData[key] != 'undefined') {
        return myData[key];
    }

    items = key.split(";");

    //已选择数据是最小路径,直接从已端数据获取
    if (items.length === keys.length) {
        return data[key] ? data[key].count : 0;
    }

    //拼接子串
    for (i = 0; i < keys.length; i++) {
        for (j = 0; j < keys[i].length && items.length > 0; j++) {
            if (keys[i][j] == items[0]) {
                break;
            }
        }

        if (j < keys[i].length && items.length > 0) {
            //找到该项,跳过
            n.push(items.shift());
        } else {
            //分解求值
            for (m = 0; m < keys[i].length; m++) {
                result += getNum(n.concat(keys[i][m], items).join(";"));
            }
            break;
        }
    }

    //缓存
    myData[key] = result;
    return result;
}

document.write(getNum("10") + ";"); //输出14
document.write(getNum("11") + ";"); //输出1
document.write(getNum("10;21") + ";"); //输出11
document.write(getNum("21;31") + ";"); //输出2​


以下是一个React组件的代码实现,用于实现前端SKU算法的商品多规格选择功能: ```jsx import React, { useState, useEffect } from "react"; const SKUSelector = ({ skuList }) => { const [selectedValues, setSelectedValues] = useState({}); const [availableOptions, setAvailableOptions] = useState({}); useEffect(() => { // 初始化可选项列表 let options = {}; skuList.forEach((sku) => { sku.attributes.forEach((attr) => { if (!options[attr.name]) { options[attr.name] = [attr.value]; } else if (!options[attr.name].includes(attr.value)) { options[attr.name].push(attr.value); } }); }); setAvailableOptions(options); }, [skuList]); const handleValueChange = (name, value) => { // 更新已选项列表 setSelectedValues({ ...selectedValues, [name]: value }); // 根据已选项列表筛选可选项列表 let options = { ...availableOptions }; for (let attrName in selectedValues) { if (attrName !== name) { skuList.forEach((sku) => { if ( sku.attributes.find((attr) => attr.name === attrName)?.value !== selectedValues[attrName] ) { options[attrName] = options[attrName].filter( (option) => option !== selectedValues[attrName] ); } }); } } setAvailableOptions(options); }; const getAvailableValues = (name) => { // 获取指定规格属性的可选项列表 return availableOptions[name] || []; }; const getSelectedSKU = () => { // 根据已选项列表获取SKU信息 let selectedSKU = null; skuList.forEach((sku) => { let matches = true; sku.attributes.forEach((attr) => { if (selectedValues[attr.name] !== attr.value) { matches = false; } }); if (matches) { selectedSKU = sku; } }); return selectedSKU; }; return ( <div> {skuList.length > 0 ? ( skuList[0].attributes.map((attr) => ( <div key={attr.name}> <label>{attr.name}:</label> <select value={selectedValues[attr.name] || ""} onChange={(e) => handleValueChange(attr.name, e.target.value)} > <option value="">请选择</option> {getAvailableValues(attr.name).map((option) => ( <option key={option} value={option}> {option} </option> ))} </select> </div> )) ) : ( <div>暂无商品信息</div> )} {getSelectedSKU() ? ( <div> <p>已选规格:{JSON.stringify(selectedValues)}</p> <p>剩余库存:{getSelectedSKU().stock}</p> </div> ) : ( <div>请选择完整规格属性</div> )} </div> ); }; export default SKUSelector; ``` 该组件接受一个SKU列表作为props,每个SKU包含一个属性列表和一个库存数量。在组件中,首先使用useEffect钩子初始化可选项列表,然后使用useState钩子管理已选项列表和可选项列表的状态。 当用户选择某个规格属性值时,组件会根据已选项列表筛选可选项列表,并更新已选项列表。当用户选择所有规格属性值后,组件会根据已选项列表获取相应的SKU信息,并显示剩余库存量。 该组件仅为示例代码,具体实现方式可能因业务需求而异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值