使用递归进行数组的每一项的组合(结合)

栏目: JavaScript · 发布时间: 4年前

内容简介:需求:数组中的每一项都要混合例如(这里的数组长度不固定,子集的children也是不固定的): arr = [ { name: "颜色", children: [ { text: "红色" }, { text: "蓝色" } ] }, { name: "型号", children: [ { text: "A级" }, { text: "B级" }, { text: "C级" } ] }, { name: "尺寸", children: [ { text: "L" }, { text: "XL" }, { t

需求:数组中的每一项都要混合

例如(这里的数组长度不固定,子集的children也是不固定的): arr = [ { name: "颜色", children: [ { text: "红色" }, { text: "蓝色" } ] }, { name: "型号", children: [ { text: "A级" }, { text: "B级" }, { text: "C级" } ] }, { name: "尺寸", children: [ { text: "L" }, { text: "XL" }, { text: "XXL" } ] }

需要的输出的结果:

[

["红色", "A级", "L"] ["红色", "A级", "XL"] ["红色", "A级", "XXL"] ["红色", "B级", "L"] ["红色", "B级", "XL"] ["红色", "B级", "XXL"] ["红色", "C级", "L"] ["红色", "C级", "XL"] ["红色", "C级", "XXL"] ["蓝色", "A级", "L"] ["蓝色", "A级", "XL"] ["蓝色", "A级", "XXL"] ["蓝色", "B级", "L"] ["蓝色", "B级", "XL"] ["蓝色", "B级", "XXL"] ["蓝色", "C级", "L"] ["蓝色", "C级", "XL"] ["蓝色", "C级", "XXL"]

]

自己的解决方案:

1.首先去除children是空的元素 function fn(arr) { var dataArr = []; for (var i = 0; i < arr.length; i++) { if (arr[i].children.length) { var pp = []; arr[i].children.forEach(item => { pp.push(item.text); }); dataArr.push(pp); } } return dataArr; } var arr1 = fn(arr);

2.其次声明一个空数组, 将递归生成的每一项添加到新书组内

递归思路:从第一个子元素数组开始循环,判断是否为当前数组的最后一项如果是则停止循环;否则继续递归循环 loop_recursion(0, arr1,''); console.log(bigArr) function loop_recursion(index, arr, StyleStr) { var tempDSC = '' for (var i = 0; i < arr[index].length; i++) { var dogStyle = arrindex; // 获取到当前遍历到的某个具体的元素 tempDSC = StyleStr + "," + dogStyle; if (index + 1 == arr.length) { // 如果元素数组的最后一项,直接输出 tempDSC= tempDSC.slice(1,tempDSC.length) tempDSC = tempDSC.split(',') bigArr.push(tempDSC); } else { // 如果还没到最后一项,带着当前组合的部分进行下一元素的玄幻 recursion(index + 1, arr, tempDSC); } } }


以上所述就是小编给大家介绍的《使用递归进行数组的每一项的组合(结合)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML5

HTML5

Matthew David / Focal Press / 2010-07-29 / USD 39.95

Implement the powerful new multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions. Understand how HTML5 is ......一起来看看 《HTML5》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试