JS 重构数组

Question

现有如下数组

var a = ['ZCOLOR','ZSIZE']
var b = [{ZCOLOR:"001",ZCOLORTEXT:"白色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40},{ZCOLOR:"002",ZCOLORTEXT:"黑色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40}]

想要得到如下数组

是一个二维数组,里面有6个数组 也就是 颜色2种，尺寸3种 2*3 = 6

这个是后台规定的表名 是固定的

拓展,如果

var a = ['ZCOLOR','ZSIZE','ZBX']
var b = [{ZCOLOR:"001",ZCOLORTEXT:"白色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40,ZBX:'A'},
{ZCOLOR:"001",ZCOLORTEXT:"白色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40,ZBX:'B'},{ZCOLOR:"002",ZCOLORTEXT:"黑色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40,ZBX:'A'},
{ZCOLOR:"002",ZCOLORTEXT:"黑色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40,ZBX:'B'}]

那么 得到一个二维数组里面就有2x3x2= 12个 如图

碰到后台这么传输数据，实在有点头大，希望寻求帮助。

Answer 1

说明：对于这样的需求，我是这样理解的：选项组是以颜色为分组标识，每个颜色下面存在不同的SIZE选项或是其他选项，通过选择某一颜色，确定接下来哪些选项是可以选择的。如果我对你需求的理解无误，那就说明一个选项组可以以颜色表示ZCOLOR作为这个分组的唯一ID标识，接下来就是基于ZCOLOR进行打组了。
代码如下：

const fields = ['ZCOLOR','ZSIZE','ZBX'];
// 定义用作组ID的字段；
const idFlag = fields[0];
// 定义一个新的字典对象
let formatedData = {};
// 除了打组以外，还需要将你所有备用数据进行集合；
// 参照 fields 中定义的字段需求进行map数据拆分
let spiltFields = ((fields)=>{
    let obj = {};
    fields.map(k => obj[k] = []);
    return obj;
})(fields);
// 会得到这样的数据字典结构，这里存放所有的a中定义的字段的不重复数据：
// spiltFields === {ZCOLOR: [],...}


// 在对各个字段类型添加数据结构
((src){
    src.map(it=>{
        // 暂存字典ID；
        let _id = it[idFlag];
        for(const k in it){
            // 这里去掉key中的数字，如：ZSIZE36 将被转换位 ZSIZE，这样好与你的目标字段进行匹配；
            const mk = k.replace(/\d/g,"");
            const v = it[k];
            // 分别判断当前k是否在spiltFields字典中定义&&该字典数据中是否还没有当前k的值，满足条件后，对数据进行push操作
            if (mk in spiltFields && !spiltFields[mk].includes(v)) {
                spiltFields[mk].push(v);
            }
            // 进行数据格式化
            if (k === idFlag) {
                // 判断idFlag的值是否以注册到字典中
                if (!(_id in formatedData)) {
                    // 生成数据字段组
                    formatedData[_id] = ((st)=>{
                        fields.map(_k=>{
                            if(_k !== idFlag) {
                                st[_k] = [];
                            }
                        })
                        return st;
                    })({})
                } else continue;
            } else {
                let cur = formatedData[_id][mk];
                if (Array.isArray(cur) && !cur.includes(v)) {
                    cur.push(v);
                }
            }
        }
    })
})(b);

你将会得到用于显示的数据字典 spiltFields:

和用于查询的数据字典formatedData:

接下来的一切都好办了，不管你的b数据源如何变，只要基于配置a和 idFlag的设置，你就能得到友好访问的数据，最后你就根据后端的传值格式传值就行了。

由于你们后端格式是固定的，建议你在前端也创建一个map与之对应，这样更方便后续配置维护。

代码手写，你可能需要自己改造优化一下，大致思路就是这样。