扩展运算符(...)的使用场景,sku属性规格的组合-CSDN博客

本文链接：https://blog.csdn.net/furygdk/article/details/136716982

文章介绍了如何用JavaScript动态处理商品属性全排列问题，涉及循环、递归和扩展运算符的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当时有个业务是将一个商品的所有sku属性组合起来。已经把sku所有属性从skuGrop中提取出来了，类似：colors = ["黑色", "白色","绿色"], address = ["china","usa","japan"];, size = ["s","l","xl","xxl"],需要把这些属性值全排列出来放进一个数组中,类似这种[["黑色","china","s"]...],

当时第一次写的时候只考虑到一个商品的情况下，就把该方法写死了,因为这个商品的属性不多，直接循环暴力就解决了,后面发现每个商品的属性个数不一样，然后利用扩展运算符可以解决不确定形参个数的问题，就又重写了这个方法。

先定义商品的sku属性值：

let colors = ["黑色", "白色"];
let size = ["s","l","xl","xxl"];
let address = ["china","usa","japan"];

combine:function(...chunks) {
    let skuList = [];  //用于存放最终符合结果的数据集
    let chunksLenth = chunks.length - 1;
    let help = function (pre,chunkIndex) {
      for(let item of chunks[chunkIndex]){
        let nowList = [];   //正在收集的一个结果
         if(item === '黑色'){  //这里我不需要黑色属性的sku
           continue;
         }
         nowList = pre.concat(item)
   
         if(chunkIndex === chunksLenth){
           skuList.push(nowList);
         }else{
           help(nowList,chunkIndex+1);
         }
      } 
    }
    help([],0);
      return skuList;
    },

console.log(this.combine(size, colors,address));

combine方法中的...chunks会将三个实参数组放进放进一个大数组里面，[ ["黑色", "白色"],

["s","l","xl","xxl"], ["china","usa","japan"]],然后只需要使用这个chunks大数组来遍历即可，用三个循环也可以直接得到结果。这里我使用了一个循环加递归，每次循环时将该数组中的item值放进nowList数组中，如果遍历的数组还没到最后一个数组，则将当前的nowList数组(此时可能为["s","白色"])，和当前大数组的索引值+1一起作为实参放到help函数中进行下一轮递归，直到最后一个数组完成时，将nowList数组放到最终skuList数组中收集起来。上面我剪枝了黑色这个属性