根据条件过滤数组

Question

const arr = [
    {
      name: '设备监控',
      child: [
        { name: '历史数据' },
        { name: '故障预警' },
        { name: '参数设置' }
      ]
    },
    {
      name: '定时场景',
      child: [{ name: '定时日志' }]
    }
  ]

const asyncRoute = [
  {
    name: '设备监控',
    redirect: '/devmon',
    children: [{
      path: '/devmon',
      redirect: '/devmon/realtime',
      children: [{
        path: '/devmon/realtime',
        name: '实时监控'
      },{
        path: '/devmon/hisdata',
        name: '历史数据'
      },
      {
        path: '/devmon/faultalarm',
        name: '故障预警'
      },
      {
        path: '/devmon/params',
        name: '参数设置'
      }]
   }]
  },
  {
    path: '/timer',
    name: '定时场景',
    redirect: '/timer/index',
    children: [{
      path: '/timer/index',
      redirect: '/timer/list',
      children: [ {
        path: '/timer/log',
        name: '定时日志'
      },  {
        path: '/scene/log',
        name: '场景日志'
      }
      ]
    }]
  },
  {
    path: '/hazard',
    name: '隐患分析',
    redirect: '/hazard/index',
    children: [{
      path: '/hazard/index',
      children: [{
        path: '/hazard/patrol',
        name: '隐患巡查'
      }, {
        path: '/hazard/analysis',
        name: '隐患统计'
      }
      ]
    }]
  }
]

怎么根据arr中的name， 把asyncRoute中包含对应的name过滤成 对应的数组, 求解好方法, 结果如下

const asyncRoute = [
  {
    name: '设备监控',
    redirect: '/devmon',
    children: [{
      path: '/devmon',
      redirect: '/devmon/realtime',
      children: [{
        path: '/devmon/hisdata',
        name: '历史数据'
      },
      {
        path: '/devmon/faultalarm',
        name: '故障预警'
      },
      {
        path: '/devmon/params',
        name: '参数设置'
      }]
   }]
  },
  {
    path: '/timer',
    name: '定时场景',
    redirect: '/timer/index',
    children: [{
      path: '/timer/index',
      redirect: '/timer/list',
      children: [ {
        path: '/timer/log',
        name: '定时日志'
      }
      ]
    }]
  }

Answer 1

您的route的结构蛮奇怪的，为什么children套了两层，你的条件又只有一层。或许你应该先优化下数据结构，这样过滤的函数能简单点，递归就行了。现在这样还真不太好递归

var arr = [
    {
      name: '设备监控',
      child: [
        { name: '历史数据' },
        { name: '故障预警' },
        { name: '参数设置' }
      ]
    },
    {
      name: '定时场景',
      child: [{ name: '定时日志' }]
    }
  ];
var asyncRoute = [
  {
    name: '设备监控',
    redirect: '/devmon',
    children: [{
      path: '/devmon',
      redirect: '/devmon/realtime',
      children: [{
        path: '/devmon/realtime',
        name: '实时监控'
      },{
        path: '/devmon/hisdata',
        name: '历史数据'
      },
      {
        path: '/devmon/faultalarm',
        name: '故障预警'
      },
      {
        path: '/devmon/params',
        name: '参数设置'
      }]
   }]
  },
  {
    path: '/timer',
    name: '定时场景',
    redirect: '/timer/index',
    children: [{
      path: '/timer/index',
      redirect: '/timer/list',
      children: [ {
        path: '/timer/log',
        name: '定时日志'
      },  {
        path: '/scene/log',
        name: '场景日志'
      }
      ]
    }]
  },
  {
    path: '/hazard',
    name: '隐患分析',
    redirect: '/hazard/index',
    children: [{
      path: '/hazard/index',
      children: [{
        path: '/hazard/patrol',
        name: '隐患巡查'
      }, {
        path: '/hazard/analysis',
        name: '隐患统计'
      }
      ]
    }]
  }
]

function filterRoute(route, names) {
  return route.reduce((res,v) => {
    var n = names.find(o => o.name == v.name)
    if( n ) {
      res.push({
        ...v,
        children: v.children.map(c => ({...c, children: c.children.filter(item => n.child.some(child => child.name == item.name))}))
      })
    }
    return res;
  }, [])
}

filterRoute(asyncRoute, arr)

// 利用递归
function filterRoute(route, names) {
  return route.reduce((res,v) => {
      var n = names.find(o => o.name == v.name);
      var {children} = v;
    if( n ) {
        res.push(!children ? {
            ...v
        } : {
            ...v,
            children: [{
                ...children[0],
                children: filterRoute(children[0].children, n.child)
            }]
        })
    }
    return res;
  }, [])
}

Answer 2

最好的办法是，像老板一样，指挥别人帮你写。