javascript（一）構造函數遞歸

   最近項目中有個需求，react項目中做一個菜單配置項的功能，即傳入某個url的參數，匹配出菜單數據內該菜單內的子菜單項及其組件。

數據體：

/* 菜單配置項 */
export const menus = [
  {
    subMenu: '首頁地圖',
    icon: '',
    path: '/map',
    component: HomeIndex,
    menus: []
  },
  {
    subMenu: '用戶管理',
    icon: '',
    path: '/userManage',
    component: UserManager,
    menus: [
      {
        subMenu: '角色管理',
        icon: '',
        path: '/character',
        component: RoleManage,
        menus: [
          {
            subMenu: '角色管理1',
            icon: '',
            path: '/character1',
            menus: []
          }
        ]
      },
      {
        subMenu: '權限管理',
        icon: '',
        path: '/permission',
        component: PurviewManage,
        menus: []
      }
    ]
  }
]

即進入userManage組件，傳入"/userManage"匹配出該菜單下的子菜單項。

import { menus } from './routeConfig'
/* 遞歸匹配菜單 */
export class findMenu {
  constructor (arr, path, key) {
    this.arr = arr
    this.path = path
    this.key = key
    this.returnedItem = []
  }
  matchMenus () {
    let _this = this
    let key = this.key
    let path = this.path
    this.arr.forEach(item => {
      if (item.path === path) {
        _this.returnedItem = item[key]
        return null
      } else if (JSON.stringify(item[key]) !== '[]') {
        _this.arr = item[key]
        _this.matchMenus()
      }
    })
  }
}
/*
 * 調用匹配菜單方法
 * url：路由鏈接
 * */
export function matchChildMenus (url) {
  let urlArray = url.split('/')
  const currentUrl = '/' + urlArray[urlArray.length - 1]
  let matchMenu = new findMenu(menus, currentUrl, 'menus')
  matchMenu.matchMenus()
  return matchMenu.returnedItem
}

findMenu函數體傳入3個參數，arr（數據體）， path（當前url路由）， key（匹配的key值）

外部調用 

/* 用戶管理 */
class UserManager extends React.Component {
  render () {
    let childMenus = matchChildMenus(this.props.match.url)
    return (
      <main>
        <UserManagerHeader childMenus={childMenus} />
        <UserManagerRoute childMenus={childMenus} />
      </main>
    )
  }
}