前端JS使用笛卡尔积处理数据

项目过程中有这样一个需求，在新增页面选择对应条件：

 如图所示，新增时只有最后一个条件4是单选，其余下拉框都支持多选，因此这里我们得到的数据格式应该是：

[
    {
        条件1: [a1, a2],
        条件2: [b1, b2],
        条件3: [c1, c2],
        条件4: d
    }
]

 而希望数据被处理为以下格式，以便于在表格中展示使用：

[
    {条件1:'a1', 条件2:'b1', 条件3:'c1', 条件4:'d'},
    {条件1:'a1', 条件2:'b1', 条件3:'c2', 条件4:'d'},
    {条件1:'a1', 条件2:'b2', 条件3:'c1', 条件4:'d'},
    {条件1:'a1', 条件2:'b2', 条件3:'c2', 条件4:'d'},
    {条件1:'a2', 条件2:'b1', 条件3:'c1', 条件4:'d'},
    {条件1:'a2', 条件2:'b1', 条件3:'c2', 条件4:'d'},
    {条件1:'a2', 条件2:'b2', 条件3:'c1', 条件4:'d'},
    {条件1:'a2', 条件2:'b2', 条件3:'c2', 条件4:'d'},
]

直接上代码：

    // 拆分
    splitFunction(obj, index){
        const keysList = Object.keys(obj)  //获取全部属性名
        if (index >= keysList.length) return []
        const arr = obj[keysList[index]]

        const key = keysList[index]
        if (arr instanceof Array) {  //判断是否为多选
            let result = []
            let subProduct = this.splitFunction(obj, index + 1)
            if (arr.length === 0) {
                // 条件内容为空
                for (let subRes of subProduct) { // 已经生成好的数组
                    result.push(Object.assign({},{[key]: '' }, subRes))
                }
            }else {
                // 条件内容不为空
                for (let elem of arr){ // 循环当前的数组
                    for (let subRes of subProduct) { // 已经生成好的数组
                        result.push(Object.assign({},{[key]: elem }, subRes))
                    }
                }
            }
            return result
        }else{  //单选的数据直接生成相应结构
            return [{[key]: arr }]
        }
    },

使用时将需要处理的数组传入获取返回值即可：

this.tableData = this.splitFunction(this.list[0], 0);

this.tableData用于接收处理好的数据，this.list则是新增页面得到的原始数据

这里还需要注意的是，新增页面得到的原始数据，是包含一个对象的数组，而我们封装的方法直接接收对象进行处理，因此需要this.list[0]的方式取到内部对象数据，才能传入方法中进行处理。