通过另一个数组 javascript 中的参数循环数组

Question

我有一系列权限const permissions = ['search', 'reports', 'whitelist'];我有一个菜单const menus = [  {    text: 'Navigation',    link: 'navigation',    topic: 'all',  },  {    text: 'Dictionary',    link: 'dict',    topic: 'src',  },  {    text: 'Services',    link: '/services',    submenu: [      {        text: 'Check company',        link: '/services/search',        topic: 'search',      },      {        text: 'Report statistic',        link: '/services/reportstatistic',        topic: 'another-topic',      },      {        text: 'Report request',        link: '/services/getrequestreport',        topic: 'another-topic-2',      },      {        text: 'Get whitelist',        link: '/services/getresponsereport',        topic: 'whitelist',      },      {        text: 'Get data',        link: '/services/requestdata',        topic: 'reports',      },    ],  },];我需要过滤menus以检查数组的每一项是否topic等于数组中的一项权限permissions，如果它具有submenu，则检查每个项目表单子菜单是否相同或是否topic ==='all'并将其添加到新菜单中。过滤后的预期结果是const newArrr = [  {    text: 'Navigation',    link: 'navigation',    topic: 'all',  },  {    text: 'Services',    link: '/services',    submenu: [      {        text: 'Check company',        link: '/services/search',        topic: 'search',      },      {        text: 'Get whitelist',        link: '/services/getresponsereport',        topic: 'whitelist',      },      {        text: 'Get data',        link: '/services/requestdata',        topic: 'reports',      },    ],  },];我试图制作自己的循环，但它不正确for (let menu of menus) {  for (let permission of filteredPermissions) {    if (menu.topic && (menu.topic == permission || menu.topic === 'all')) {      newArr.push(menu);    }    if (menu.submenu) {      for (let submenu of menu.submenu) {        for (let permissionSecond of filteredPermissions) {          if (!(submenu.topic == permissionSecond) || !(submenu == 'all')) {            menu.submenu.splice(menu.submenu[submenu], 1);          }        }      }    }  }}

Answer 1

这就是我的做法 - 首先根据.topic权限是否包含来过滤父数组，然后迭代具有数组的结果submenu并将子数组属性重新分配给过滤后的版本：

const permissions = ['search', 'reports', 'whitelist'];

permissions.push('all');

const menus=[{text:"Navigation",link:"navigation",topic:"all"},{text:"Dictionary",link:"dict",topic:"src"},{text:"Services",link:"/services",submenu:[{text:"Check company",link:"/services/search",topic:"search"},{text:"Report statistic",link:"/services/reportstatistic",topic:"another-topic"},{text:"Report request",link:"/services/getrequestreport",topic:"another-topic-2"},{text:"Get whitelist",link:"/services/getresponsereport",topic:"whitelist"},{text:"Get data",link:"/services/requestdata",topic:"reports"}]}];

const filteredMenus = menus.filter(

  item => !item.topic || permissions.includes(item.topic)

);

filteredMenus

  .filter(item => item.submenu)

  .forEach(item => item.submenu = item.submenu.filter(

    subitem => permissions.includes(subitem.topic)

  ));

console.log(filteredMenus);

Answer 2

您可以使用Array.reduce处理menus数组，检查主题是否all包含在 中permissions，并根据相同的规则过滤子菜单值：

const permissions = ['search', 'reports', 'whitelist'];

const menus=[{text:"Navigation",link:"navigation",topic:"all"},{text:"Dictionary",link:"dict",topic:"src"},{text:"Services",link:"/services",submenu:[{text:"Check company",link:"/services/search",topic:"search"},{text:"Report statistic",link:"/services/reportstatistic",topic:"another-topic"},{text:"Report request",link:"/services/getrequestreport",topic:"another-topic-2"},{text:"Get whitelist",link:"/services/getresponsereport",topic:"whitelist"},{text:"Get data",link:"/services/requestdata",topic:"reports"}]}];

const includeMenu = (menu) => menu.topic == 'all' || permissions.includes(menu.topic);

const newArr = menus.reduce((c, m) => {

  if (m.submenu) {

    submenus = m.submenu.filter(includeMenu);

    if (submenus.length) {

      c.push({

        text: m.text,

        link: m.link,

        submenu: submenus

      });

    }

  } else if (includeMenu(m)) {

    c.push(m);

  }

  return c;

}, []);

console.log(newArr);