这是我参与2022首次更文挑战的第5天,活动详情查看:2022首次更文挑战
记得那是一个天气炎热的夏天,坐在办公室里吹着空调听着音乐,那感觉舒服极了;后台接口突然丢过来了一组树状结构数据让我自己从里面取自己想要的数据,啊这,不应该都是后台处理好数据再反给我的吗,但初来乍到的小萌新也不敢跟老油条说啥,只能自己搞了。数据格式如下:
let treeData = [ { id: '1', title: '地区', children: [ { id: '1-1', title: '食品', children: [ { id: '1-1-1', title: '蔬菜', children: [ { name: '包菜' }, { name: '菜心' }, ]
},
{
id: '1-1-2',
title: '水果',
children: [
{
name: '苹果'
},
{
name: '大西瓜'
}
]
}
]
},
{
id: '1-2',
title: '生活用品',
children: [
{
id: '1-2-1',
title: '厨具',
children: [
{
name: '碗'
},
{
name: '盘子'
}
]
},
]
}
]
}
];
需要取叶子节点的name属性,用于展示在页面上;通过观察,这是由数组和对象组成的,我们可以采用forEach和点语法来取到里面的值。
let str = '';
treeData.forEach( item => {
item.children.forEach( subItem => {
subItem.children.forEach( _ => {
_.children.forEach( _sub => {
str += _sub.name + ";"
})
})
})
})
console.log('str--:', str) //str--: ,包菜,菜心,苹果,大西瓜,碗,盘子
虽然功能实现了,但是问题也暴露出来了,这个数据有四层结构,就用了四个循环,那如果由于某个需求还在往里面嵌套几层进去,那岂不是代码就要嵌套很多个循环,这样后面接手的人岂不是会很开心(疯掉)。
递归函数
递归函数就是在一个函数里面通过名字来调用自身。对于上面那个深层嵌套问题我们可以采用递归函数解决。
let str = '';
function factorial(list) {
list.forEach( item => {
if(item.children&&Array.isArray(item.children)) {
factorial(item.children)
}else{
str += item.name + ";"
}
})
}
factorial(treeData)
console.log('str--:', str) // str--: ,包菜,菜心,苹果,大西瓜,碗,盘子
先用forEach来循环最外层的数组,再判断数组里面的每个元素是否有children属性,若是没有,则证明已经叶子节点了,取name值;若是有children属性,则再调用自己本身这个函数;这样的话就可以完美地解决上面那个问题了,无论根据什么样的需求再嵌套几层,我一个递归就可以搞定了。现实需求也不一定会取全部的,也有可能去其中的一部分,这样根据给的id价格判断就行了。
裴波那契数列
简单的来说,它就是一串特殊的阿拉伯数字组成;0,1,1,2,3,5,8,...;每一项都等于前面两项相加所得出的结果;后面还有多少项,不知道,应该是无穷无尽吧。我们可以用递归函数来计算出前几项相加的结果
function fibonacci(n) {
if(n === 0 || n === 1)
return n;
return fibonacci(n-1) + fibonacci(n-2);
}
console.log(fibonacci(20)) // 6765
最后一说,递归是方便了我们深层次的循环,但是一不小心可能会进入死循环,使用时一定要注意。