js输出一个简单的排列组合表格

最近遇到一个问题，分享一下。

属性N个，每个属性下有若干（1～n）个选项，某个属性下的每一项需要与其他属性组合成一条数据，每条数据包含N个属性，不可重复。

比如属性A = [1, 2, 3], B = [4, 5], C = [6, 7];排列组合输出的数据长这样:

最终得到12条数据。

由于属性是不确定数量的，看到源码里套了n层的for循环表示惊了...

let arr = [A, B, C];
for (let i0 = 0; i0 < A.data.length; i0++) {
    // ...
    if (arr.length > 1) {
        for (let i1 = 0; i1 < B.data.length; i1++) {
        // ...
        if (arr.length > 2) {
            for (let i2 = 0; i2 < C.data.length; i2++) {
            // ...

这种写法直接限制了属性的个数，于是想着用递归来解决这个问题。

一开始陷入对二维数组的分析，一番折腾后，尝试用树状图来理解这个问题，发现简单许多。

直接上代码：

// 数据：
var arr =[{code: 101, data:[{'text':1},{'text':2},{'text':3}]}, 
	{code: 102, data:[{'text':4},{'text':5}]},
	{code: 103, data:[{'text':6},{'text':7},{'text':8}]}
]

// 解法一
var fn = function(xxx, aaa, code) {
    var result = [];
    aaa.forEach((item, i) =>{
        if (xxx.length) {
            xxx.forEach((itemx, j) => {
                var _obj = {...itemx};
                _obj[code] = item.text;
                result.push(_obj);
            });
        } else {
            var _obj = {};
            _obj[code] = item.text;
            result.push(_obj);
        }
    })
    return result;
};
var result1 = [];
arr.reverse().forEach((a, i)=>{
    time ++;
    result1 = fn(result1, a.data, a.code);
});
console.log(result1);

// 解法二
var fn1 = function(preResult, curItem, index, array) {
    var result = [];
    var code = array[index].code;
    curItem.data.forEach((item, i) =>{
        if (preResult.length) {
            preResult.forEach((itemx, j) => {
                var _obj = {...itemx};
                _obj[code] = item.text;
                result.push(_obj);
            });
        } else {
            var _obj = {};
            _obj[code] = item.text;
            result.push(_obj);
        }
    })
    return result;
};
var result2 = [[]].concat(arr.reverse()).reduce(fn1);
console.log(result2);

总结

解这个问题的初衷只是看那些for循环觉得死板，所以本例中的数据迁就于原本代码中的那堆for循环的入口出口数据，也许不是最优解。欢迎各位大神指点更好的写法。