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.遞歸遍歷樹數據
遞歸，就是在運行的過程中調用自己，大大減少了代碼量