关于数组数据处理

Question

const routes = [

{
  path: '/',
  name: 'home',
  meta: {
    title: '首页',
    icon: 'el-icon-menu',
    hide: true
  },
},
{
  path: '/monitor',
  name: '系统监控',
  meta: {
    title: '系统监控',
    hide: true
  },
  children: [
    {
      path: '/monitor/pass',
      name: '进件状况',
      meta: {
        title: '进件状况',
        hide: true
      }
    },
    {
      path: '/monitor/rules',
      name: '系统规则',
      meta: {
        title: '系统规则',
        hide: true
      }
    }
  ]
},
{
  path: '/blacklist',
  name: '设置管理',
  meta: {
    title: '设置管理',
    hide: true
  },
  children: [
    {
      path: '/blacklist/id-card',
      name: '设置状态',
      meta: {
        title: '设置状态',
        hide: true
      }
    },
    {
      path: '/blacklist/companyName',
      name: '设置条件',
      meta: {
        title: '设置条件',
        hide: true
      }
    },
    {
      path: '/blacklist/companyPhone',
      name: '设置参数',
      meta: {
        title: '设置参数',
        hide: true
      }
    },
  ]
},
{
  path: '/bairongLoaning',
  name: '名单管理',
  meta: {
    title: '人员名单管理',
    icon: 'el-icon-view',
    hide: true
  }
}

],

const permission = ['首页', '人员名单管理','设置参数','设置状态'];
menu渲染是根据上面的routes的meta里的title字段来的。现在的场景是菜单可能会只有一级菜单，或有二级菜单，或者会有更多，我菜单是递归渲染的
然后现在我要根据这个permission数组去控制routes里面的meta的hide字段，如果permission里面有这个权限，就把这个菜单的meta的hide设置为false;
然后如果跟二级菜单也就是children里的对应了，就要把这条item.children.meta的hide设置为false，并且把他的父级菜单也显示
怎么写比较简便### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

切记，伸手党习惯需要改变

因为不确定层级，最好的解决方法就是递归；

因为数组是引用类型，所以在递归中并没有对route进行重新赋值。

let route = [
    {
      path: '/',
      name: 'home',
      meta: {
        title: '首页',
        icon: 'el-icon-menu',
        hide: true
      },
    },
    {
      path: '/monitor',
      name: '系统监控',
      meta: {
        title: '系统监控',
        hide: true
      },
      children: [
        {
          path: '/monitor/pass',
          name: '进件状况',
          meta: {
            title: '进件状况',
            hide: true
          }
        },
        {
          path: '/monitor/rules',
          name: '系统规则',
          meta: {
            title: '系统规则',
            hide: true
          }
        }
      ]
    },
    {
      path: '/blacklist',
      name: '设置管理',
      meta: {
        title: '设置管理',
        hide: true
      },
      children: [
        {
          path: '/blacklist/id-card',
          name: '设置状态',
          meta: {
            title: '设置状态',
            hide: true
          }
        },
        {
          path: '/blacklist/companyName',
          name: '设置条件',
          meta: {
            title: '设置条件',
            hide: true
          }
        },
        {
          path: '/blacklist/companyPhone',
          name: '设置参数',
          meta: {
            title: '设置参数',
            hide: true
          }
        },
      ]
    },
    {
      path: '/bairongLoaning',
      name: '名单管理',
      meta: {
        title: '人员名单管理',
        icon: 'el-icon-view',
        hide: true
      }
    }
]

const permission = ['首页', '人员名单管理','设置参数','设置状态'];

function checkPermission(route, parent = null) {
    for (let item of route) {
        if (item.children && item.children.length > 0) {
            checkPermission(item.children, item)
        } else {
            item.meta.hide = !permission.includes(item.name)
            if (parent && permission.includes(item.name) && parent.meta.hide) {
                parent.meta.hide = false
            }
        }
    }
}

checkPermission(route)