«

vue怎么通过笛卡儿积实现sku库存配置

时间:2024-6-10 11:15     作者:韩俊     分类: Javascript


今天小编给大家分享一下vue怎么通过笛卡儿积实现sku库存配置的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

    vue通过笛卡儿积实现sku库存配置

    以两个属性为例子,举例说明:

    1x1:
    白色
    S
    结合之后就是
    [白色,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
    结合之后就是
    [白色,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
    结合之后就是
    [白色,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()的入参,需与博主保持一致(数组对象),否则会有问题哦~
    如果是1x1 ,就是总共生成1条
    [ [ { } ] , [ { } ] ],变成 [ [ { } , { } ] ]
    如果是2x1 ,就是总共生成2条
    [ [ { } ,{ } ] , [ { } ] ] 变成 [ [ { } ,{ } ] , [ { } ,{ } ] ]

    笛卡尔积生成商品SKU组合

        var arr = [
            ['黑色', '白色', '蓝色'],
            ['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));

    该方法用于根据商品规格属性生成商品SKU组合,以上为javascript代码

    执行结果如下:

        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: ["蓝色", "8GB", "大"]
        19: ["蓝色", "8GB", "中"]
        20: ["蓝色", "8GB", "小"]
        21: ["蓝色", "16GB", "大"]
        22: ["蓝色", "16GB", "中"]
        23: ["蓝色", "16GB", "小"]
        24: ["蓝色", "32GB", "大"]
        25: ["蓝色", "32GB", "中"]
        26: ["蓝色", "32GB", "小"]

    标签: javascript vue

    热门推荐