vue通過(guò)笛卡兒積實(shí)現(xiàn)sku庫(kù)存配置方式

更新時(shí)間：2023年04月19日 10:36:46 作者：淺巷陌漓

這篇文章主要介紹了vue通過(guò)笛卡兒積實(shí)現(xiàn)sku庫(kù)存配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue通過(guò)笛卡兒積實(shí)現(xiàn)sku庫(kù)存配置

目標(biāo)

通過(guò)頁(yè)面上渲染出來(lái)的動(dòng)態(tài)屬性實(shí)現(xiàn)sku庫(kù)存配置

將已選擇的所有屬性，通過(guò)笛卡兒積實(shí)現(xiàn)sku庫(kù)存配置

以兩個(gè)屬性為例子，舉例說(shuō)明：

1x1:
白色
S
結(jié)合之后就是
[白色,S]

?this.selectCheckArr=[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ]
]
?this.selectCheckArr = this.getProducts(this.selectCheckArr)
?console.log(this.selectCheckArr)
?/** 輸出：[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ]
]
**/

1x2
白色黃色
S
結(jié)合之后就是
[白色,S ],[黃色,S ]

?this.selectCheckArr=[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ]
]
?this.selectCheckArr = this.getProducts(this.selectCheckArr)
?console.log(this.selectCheckArr)
?/** 輸出：?
?[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? },
? ? ? ?{
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ]
]
**/

2x2
白黃
S M
結(jié)合之后就是
[白色,S ],[白色,M ],[黃色,S ],[黃色,M ]

?this.selectCheckArr= [
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 12,
? ? ? ? ? ? "attrValueName": "M"
? ? ? ? }
? ? ]
]
?this.selectCheckArr = this.getProducts(this.selectCheckArr)
?console.log(this.selectCheckArr)
?/** 輸出：?
?[
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 00,
? ? ? ? ? ? "attrValueName": "白色"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 12,
? ? ? ? ? ? "attrValueName": "M"
? ? ? ? }
? ? ],
? ? [
? ? ? ? ?{
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? },
? ? ? ? ?{
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 11,
? ? ? ? ? ? "attrValueName": "S"
? ? ? ? }
? ? ],
? ? [
? ? ? ? {
? ? ? ? ? ? "attrId": 0,
? ? ? ? ? ? "attrName": "顏色",
? ? ? ? ? ? "attrValueId": 01,
? ? ? ? ? ? "attrValueName": "黃色"
? ? ? ? },
? ? ? ?{
? ? ? ? ? ? "attrId": 1,
? ? ? ? ? ? "attrName": "大小",
? ? ? ? ? ? "attrValueId": 12,
? ? ? ? ? ? "attrValueName": "M"
? ? ? ? }
? ? ]
]
**/

笛卡兒積方法

? ? // 笛卡兒積
? ? ? getProducts(specs) {
? ? ? ? if (!specs || specs.length == 0) {
? ? ? ? ? return [];
? ? ? ? } else {
? ? ? ? ? return joinSpec([
? ? ? ? ? ? []
? ? ? ? ? ], specs, 0, specs.length - 1);
? ? ? ? }

? ? ? ? function joinSpec(prevProducts, specs, i, max) {
? ? ? ? ? var currentProducts = [],
? ? ? ? ? ? currentProduct, currentSpecs = specs[i];
? ? ? ? ? if (i > max) {
? ? ? ? ? ? return prevProducts;
? ? ? ? ? }
? ? ? ? ? prevProducts.forEach(function (prevProduct) {
? ? ? ? ? ? currentSpecs.forEach(function (spec) {
? ? ? ? ? ? ? currentProduct = prevProduct.slice(0);
? ? ? ? ? ? ? currentProduct.push(spec);
? ? ? ? ? ? ? currentProducts.push(currentProduct);
? ? ? ? ? ? });
? ? ? ? ? });
? ? ? ? ? return joinSpec(currentProducts, specs, ++i, max);
? ? ? ? }
? ? ? },

注意

this.getProducts()的入?yún)ⅲ枧c博主保持一致(數(shù)組對(duì)象)，否則會(huì)有問(wèn)題哦~
如果是1x1 ，就是總共生成1條
[ [ { } ] , [ { } ] ]，變成 [ [ { } , { } ] ]
如果是2x1 ，就是總共生成2條
[ [ { } ,{ } ] , [ { } ] ] 變成 [ [ { } ,{ } ] , [ { } ,{ } ] ]

笛卡爾積生成商品SKU組合

    var arr = [
        ['黑色', '白色', '藍(lán)色'],
        ['8GB', '16GB', '32GB'],
        ['大', '中', '小']
    ];
 
    /**
     * 生成笛卡爾積
     * @returns {*}
     */
    function descartes(array) {
        if (array.length < 2) return array[0] || [];
        return [].reduce.call(array, function (col, set) {
            var res = [];
            col.forEach(function (c) {
                set.forEach(function (s) {
                    var t = [].concat(Array.isArray(c) ? c : [c]);
                    t.push(s);
                    res.push(t);
                })
            });
            return res;
        });
    }
    console.log(descartes(arr));

該方法用于根據(jù)商品規(guī)格屬性生成商品SKU組合，以上為javascript代碼

執(zhí)行結(jié)果如下：

0: ["黑色", "8GB", "大"]
1: ["黑色", "8GB", "中"]
2: ["黑色", "8GB", "小"]
3: ["黑色", "16GB", "大"]
4: ["黑色", "16GB", "中"]
5: ["黑色", "16GB", "小"]
6: ["黑色", "32GB", "大"]
7: ["黑色", "32GB", "中"]
8: ["黑色", "32GB", "小"]
9: ["白色", "8GB", "大"]
10: ["白色", "8GB", "中"]
11: ["白色", "8GB", "小"]
12: ["白色", "16GB", "大"]
13: ["白色", "16GB", "中"]
14: ["白色", "16GB", "小"]
15: ["白色", "32GB", "大"]
16: ["白色", "32GB", "中"]
17: ["白色", "32GB", "小"]
18: ["藍(lán)色", "8GB", "大"]
19: ["藍(lán)色", "8GB", "中"]
20: ["藍(lán)色", "8GB", "小"]
21: ["藍(lán)色", "16GB", "大"]
22: ["藍(lán)色", "16GB", "中"]
23: ["藍(lán)色", "16GB", "小"]
24: ["藍(lán)色", "32GB", "大"]
25: ["藍(lán)色", "32GB", "中"]
26: ["藍(lán)色", "32GB", "小"]