最近遇到一个问题,分享一下。
属性N个,每个属性下有若干(1~n)个选项,某个属性下的每一项需要与其他属性组合成一条数据,每条数据包含N个属性,不可重复。
比如属性A = [1, 2, 3], B = [4, 5], C = [6, 7];排列组合输出的数据长这样:
A | B | C |
---|---|---|
1 | 4 | 6 |
1 | 4 | 7 |
1 | 5 | 6 |
1 | 5 | 7 |
... | ... | ... |
3 | 4 | 7 |
3 | 5 | 6 |
3 | 5 | 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循环的入口出口数据,也许不是最优解。欢迎各位大神指点更好的写法。