js遍历树，递归方法优化多层嵌套for循环

js遍历树，递归⽅法优化多层嵌套for循环
1.需求
通过菜单权限来显⽰相应的内容
菜单形式:⼀级菜单+⼆级菜单+三级菜单
permission_routers:[
{
path: "/purchase1"
name: "purchaseManagement"
meta: Object
children: [
path: "/purchase/balance"
name: "purchaseBalanceManagement"
meta: Object
children: [
path: "pre-contract-list"
name: "purchasePreContractList"
meta: Object
]
]
}
{
path: "/purchase2"
name: "purchaseManagement"
meta: Object
children: [
path: "/purchase/balance"
name: "purchaseBalanceManagement"
meta: Object
children: [
path: "pre-contract-list"
name: "purchasePreContractList"
meta: Object
]
]
}
]
2.分析
⽅式⼀：
1.把所有菜单(⼀级菜单+⼆级菜单+三级菜单)全部遍历出来push到⼀个空数组中
2.先循环遍历⼀级菜单，把所有以及菜单的name放到空数组中，同时遍历每个⼀级菜单是否有⼦菜单，有的话，继续遍历⼦菜单，把⼦菜单的name放到数组中，同时遍历每个⼆级菜单，看是否有⼦菜单，有的话，遍历⼦菜单，把⼦菜单的name放到数组中
getUserRolesPermissions(){
let arr = []
this.permission_routers.forEach(item => {
const itemObj = this.MixinClone(item)
delete itemObj.children
arr.push(itemObj)
if (item.children) {
item.children.forEach(jtem => {
const jtemObj = this.MixinClone(jtem)
delete jtemObj.children
arr.push(jtemObj)
if (jtem.children) {
jtem.children.forEach(ktem => {
const ktemObj = this.MixinClone(ktem)
delete ktemObj.children
arr.push(ktemObj)
})
}
})
}
})
this.menuFeatures = arr
},
⽅式⼆(使⽤递归)：
getUserRolesPermissions(permission_routers,menuFeatures){
permission_routers.forEach(item => {
const itemObj = this.MixinClone(item)
delete itemObj.children
menuFeatures.push(itemObj)
if(item.children){
this.getUserRolesPermissions(item.children,menuFeatures)
}
})
},
3.总结
1.使⽤普通的办法：
上⾯的源代码只有三级，就已经很长了，⽽且每多⼀级就要多想⼀个变量名，如果层级更多，那光想变量名就头疼了，从可读性与维护性来说都不适合，所以要⽤递归来实现。

3.递归遍历树数据
递归，就是在运⾏的过程中调⽤⾃⼰，⼤⼤减少了代码量。