（最简易版本1）js笛卡尔积生成商品SKU多规格算法

╰半橙微兮° 2023-10-09 14:41 8阅读 0赞

[（B站一博主保姆级理解）笛卡尔积生成商品SKU\_\_揽的博客-CSDN博客][B_SKU_-CSDN]

首先这篇文章得仔细看，上面是我出的第一版本多规格算法可以去看一下思路，最主要的思路还是来源于**递归算法**

### **算法版本升级** ###

### 1.[使用Reduce][Reduce]函数来对算法进行升级优化 ###

首先了解一下reduce

reduce() 方法接收一个函数作为累加器，[数组][Link 1]中的每个值（从左到右）开始缩减，最终计算为一个值。

**原理还是一个递归，但是reduce更简单**

#### 1.1概述 ####

let 结果 = 数组.reduct(累加器, 初始化值)
    //累加器
    (累加结果, 当前值, 当前索引)=>{
    
    	return 处理结果//这里的处理结果会返回给下一次的累加结果
    }

#### 1.2累加和 ####

// reduce 案例1：累加和
    let arr = [1,2,3,4,5]
    
    let s = arr.reduce( (sum,current,index)=>{
    
        return sum + current
    } , 0)
    
    
    console.info(s)

### 2.使用 reduce函数生成笛卡尔积 ###

let arr = [
        ['红色', '黑色', '白色'],
        ['16G', '32G'],
        ['移动版', '联通版'],
    ]
    let result = arr.reduce((a, b, c) => {
        var res = []
        a.map(x => {
            b.map(y => {
                res.push([...x, y])
            })
        })
        return res
    }, [[]])
    console.log(result)

![b9cd28a70d9348e0b4dbebc6b79365df.png][]

3.生成对象形式的笛卡尔积（这种形式常用与elementui）方便简单

let newArr = [{
            name: 'color',
            data: ['红色', '黑色', '白色'],
        },
        {
            name: 'size',
            data: ['16G', '32G'],
        },
        {
            name: 'banben',
            data: ['移动版', '联通版'],
        }
    ]
    
    let newResult = newArr.reduce((a, b, c) => {
        let res=[]
        a.map(x=>{
            b.data.map(y=>{
                res.push({...x,[b.name]:y})
            })
        })
        return res
    },[{}])
    console.log(newResult)

![fa5069cd1f7542f288f8da16de96d44f.png][]

[B_SKU_-CSDN]: https://blog.csdn.net/qq_59747594/article/details/126672159
[Reduce]: https://so.csdn.net/so/search?q=Reduce&spm=1001.2101.3001.7020
[Link 1]: https://so.csdn.net/so/search?q=%E6%95%B0%E7%BB%84&spm=1001.2101.3001.7020
[b9cd28a70d9348e0b4dbebc6b79365df.png]: https://img-blog.csdnimg.cn/b9cd28a70d9348e0b4dbebc6b79365df.png
[fa5069cd1f7542f288f8da16de96d44f.png]: https://img-blog.csdnimg.cn/fa5069cd1f7542f288f8da16de96d44f.png