美文网首页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

相关文章

  • vue sku商品

    刚看到后台传的数据的时候,那个头啊真是一个头两个大。查询了百度后就开始有了灵感和思路了,下面就来看看实现的效果吧,...

  • 商城中开发商品sku及其他汇总

    1: sku商品,点击商品进去并不是商品的ID而是sku的id 基本表, 规格表 , 规格属性表 商品sku表 ...

  • B2B产品触发器

    写入sku表触发 更新sku表触发 批量导入商品属性表 根据通用名归档商品分类

  • 支付逻辑漏洞绕过技巧

    0x01 尝试修改小数 某商城购买商品时,参数中有商品id(sku),数量(qty),赠品(subSku),等其他...

  • 算法实际应用集(上)

    使用笛卡尔算法进行sku组合 需求 对商品规格进行排列组合,电商的sku商品组合 功能截图,对商品规格进行组合排列...

  • SKU商品后台管理规格生成

    SKU商品后台管理规格生成 关于: 在做商品管理系统经常遇到一个需求,需要在前台动态添加商品SKU,然后生成表格,...

  • 淘宝购物车

    加入购物车的是sku 单个sku已卖光,但编辑时,应该可以选择此商品的其它sku

  • 商品规则-SKU

    先了解一下 SKU 的学术概念吧:最小库存管理单元(Stock Keeping Unit, SKU)是一个会计学名...

  • 电商系统mini

    1、用户系统:会员信息、地址管理等 2、商品系统:商品库、SKU、类目、库存、购物车 3、营销系统:运营位、优惠券...

  • 淘宝专业名词解释

    SKU:宝贝的销售属性集合,供买家在下单时点选,如规格、颜色、尺寸等。商品编码商品款式:宝贝的款式种类,不区分规格...

网友评论

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

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