通过另一个数组 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);