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>
    )
  }
}