美文网首页Web前端之路1024Vue.js
48、vue商品sku幂等路径转换

48、vue商品sku幂等路径转换

作者: 圆梦人生 | 来源:发表于2024-03-18 14:25 被阅读0次
    • 什么是sku
      SKU=Stock Keeping Unit(库存量单位),即库存进出计量的单位,可以是以件,盒,托盘等为单位。针对电商而言,一款商品SKU主要由商品规格组合。

    • 什么是笛卡尔乘积

      笛卡尔乘积是指在数学中,两个集合X和Y的笛卡尓积(Cartesian product),又称直积,表示为X×Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员 。
      假设集合A={a, b},集合B={0, 1, 2},则两个集合的笛卡尔积为{(a, 0), (a, 1), (a, 2), (b, 0), (b, 1), (b, 2)}。

    假设现在有sku商品集合:

    image.png

    对应sku集合:

    image.png

    需要转换成如下格式:

    image.png

    案例

    export default {
      //
      data(){
        return {
           // sku列表
           skulist: [
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XL加绒款",
                "skuCode": "346c252f51354bd08107b11d2961523d",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969558622210",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XL春秋薄款",
                "skuCode": "09a1089b3cd34261a0331c3daac99115",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969579593729",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XXL加绒款",
                "skuCode": "2339291237684dda9fdfd5d8d6dbf657",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969592176642",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XXL春秋薄款",
                "skuCode": "b97051c269fc42f6a8f164f852fbc3de",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969608953857",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XXXL加绒款",
                "skuCode": "43a6f3fca0f84f4487f111bdea791bb5",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XXXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969629925378",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XXXL春秋薄款",
                "skuCode": "86d780a8497d4b10a847073525f28e8f",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XXXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969646702593",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XL加绒款",
                "skuCode": "98eacc7763fb45aca2171783c75bf98c",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969667674114",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XL春秋薄款",
                "skuCode": "81178dc3048e41d29f2e8788fc88a027",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969684451330",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XXL加绒款",
                "skuCode": "e38a2fd12b34407196bc1309b8221e63",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969697034241",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XXL春秋薄款",
                "skuCode": "9c754bf1ed3f4e9f9e598727eff07173",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969722200065",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XXXL加绒款",
                "skuCode": "a71a7347c52d4656861b171ce3237e18",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XXXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969743171585",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XXXL春秋薄款",
                "skuCode": "1543c8c334624cca98780d4da6b9b9ce",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XXXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969759948802",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XL加绒款",
                "skuCode": "0811152fa3474b62afd56242508cffa3",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969776726018",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XL春秋薄款",
                "skuCode": "7c7c5267d7e145f3836331368467a50e",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969789308930",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XXL加绒款",
                "skuCode": "f74ba6db934146cd82040c77fe06363a",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969806086146",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XXL春秋薄款",
                "skuCode": "278439bd34804ad6b49a3b0e2efe6a96",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969818669057",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XXXL加绒款",
                "skuCode": "f42d9edbcee94695a0463526ec4ad3ab",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XXXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969831251969",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XXXL春秋薄款",
                "skuCode": "e344b2b1b0e44aa78047d2bc3527ad09",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XXXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749373969877389313",
                "createTime": 1705918231000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XL加绒款",
                "skuCode": "f140db7e87924d64ac02733ba0c96f4e",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361671520258",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XL春秋薄款",
                "skuCode": "324abc8359c9494ab4d08c9b847a2792",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361688297474",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XXL加绒款",
                "skuCode": "1475f287fc4a4ebeb02eec7a11add3e7",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361700880385",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XXL春秋薄款",
                "skuCode": "ac1a0ce0a7834b13aa5aefd2abf39270",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361717657602",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XXXL加绒款",
                "skuCode": "6df5be8788cc45c59d30308012cc0a0c",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XXXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361738629121",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "黑色XXXL春秋薄款",
                "skuCode": "0e53be777e3245f8b122c010b2cc7e1f",
                "skuImg": "",
                "stock": 1000,
                "specification": "黑色/XXXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361755406338",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XL加绒款",
                "skuCode": "3cd0aa7feffe42b9a3dc71176eec7b99",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361788960769",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XL春秋薄款",
                "skuCode": "cbfc8265da614a389017efaf2425c0a4",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361814126594",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XXL加绒款",
                "skuCode": "5f9fffc5ae4142e69b1f75383dc0d2b7",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361835098113",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XXL春秋薄款",
                "skuCode": "b72a7c8becb54446a6e7566397d0e53e",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361860263938",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XXXL加绒款",
                "skuCode": "1dbccc90b026446c9ad2042d7c552910",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XXXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361885429761",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "白色XXXL春秋薄款",
                "skuCode": "92ba4e52872a42389ff502421e570313",
                "skuImg": "",
                "stock": 1000,
                "specification": "白色/XXXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361910595585",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XL加绒款",
                "skuCode": "15bec0eccb8f4373a838e8d3fc48d03f",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361939955714",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XL春秋薄款",
                "skuCode": "871261d03a7744a1aa4ac7a8f45b9bce",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361969315842",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XXL加绒款",
                "skuCode": "dbbbe04f4de1485892a6299d9f5a02be",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374361994481665",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XXL春秋薄款",
                "skuCode": "684f381d4d1d4cc292af5acc53ad641b",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374362032230402",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XXXL加绒款",
                "skuCode": "a6ee01431bb44805af8319d39ff3e8e2",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XXXL/加绒款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374362061590530",
                "createTime": 1705918324000
            },
            {
                "remark": "",
                "appId": null,
                "productId": "1749373969529262082",
                "skuName": "青色XXXL春秋薄款",
                "skuCode": "5cfc1208d8b64c20bee866c087332d94",
                "skuImg": "",
                "stock": 1000,
                "specification": "青色/XXXL/春秋薄款",
                "pointAmount": 100,
                "realPayPoint": null,
                "id": "1749374362095144961",
                "createTime": 1705918324000
            }
        ]
        }
      },
      methods: {
        // 
        skuMapList(){
          let pathMap = this.getPathMap(this.skulist);
          console.log('pathMap ===== ', pathMap);
        },
        getPathMap(skus){
          const spliter = '/'
          // 用来保存的路径字典
          const pathMap = {};
          skus.forEach(sku=>{
            // 1.过滤出有效的sku因为库存会出有0的情况
            if(sku.stock){
              // 2. 拼接起来得到属性值数组例如 ['黑色','中国','10cm']
              const specs = sku.specification.split('/');
              // const specs = sku.specs.map(spec => spec.valueName);
              // 3.得到sku的子集 [[] ["蓝色"] ["中国"]["蓝色", "中国"] ["10cm"]...]
              const powerSet = this.getPowerSet(specs);
              // 将子集循环
              powerSet.forEach(set=>{
                const key = set.join(spliter);
                if(pathMap[key]){
                  // 已经有key往数组追加
                  pathMap[key].push(sku.id)
                }else{
                  // 没有key设置一个数组
                  pathMap[key] = [sku.id]
                }
              })
            }// end if
          });
          //
          return pathMap;
        },
        // 幂等算法
        getPowerSet(originalSet){
          const subSets = [];
          // We will have 2^n possible combinations (where n is a length of original set).
          // It is because for every element of original set we will decide whether to include
          // it or not (2 options for each set element).
          const numberOfCombinations = 2 ** originalSet.length;
          // Each number in binary representation in a range from 0 to 2^n does exactly what we need:
          // it shows by its bits (0 or 1) whether to include related element from the set or not.
          // For example, for the set {1, 2, 3} the binary number of 0b010 would mean that we need to
          // include only "2" to the current set.
          for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex += 1) {
            const subSet = [];
            for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex += 1) {
              // Decide whether we need to include current element into the subset or not.
              if (combinationIndex & (1 << setElementIndex)) {
                subSet.push(originalSet[setElementIndex]);
              }
            }
            // Add current subset to the list of all subsets.
            subSets.push(subSet);
          }
          return subSets;
        }
      },
      //
      created() {
       this.skuMapList()
      }
    }
    

    幂等路径js算法:https://raw.githubusercontent.com/trekhleb/javascript-algorithms/master/src/algorithms/sets/power-set/bwPowerSet.js

    相关文章

      网友评论

        本文标题:48、vue商品sku幂等路径转换

        本文链接:https://www.haomeiwen.com/subject/itxzzdtx.html