javascript数组中的深度过滤对象答案

【问题标题】：Deep filter objects in javascript arrayjavascript数组中的深度过滤对象
【发布时间】：2020-02-19 23:06:26
【问题描述】：

从下面的代码中，我只需要返回包含meta.menu 的对象，同时保留结构。

所以在下面的例子中，只有"panel.users.view" 的对象会被删除。我试过制作一个递归函数来遍历它，但我不知道如何无限地遍历它，因为可能有更多的对象。我不知道一个路由对象能达到多少层。

我还查看了 lodash 和 collect.js 以查看是否有可用于此的功能，但我无法找到解决方案我自己的。

非常感谢您的帮助，非常感谢！

const routes = [
    {
        path: "/panel",
        name: "panel",
        redirect: { name: "panel.dashboard" },
        component: {},
        children: [
            {
                path: "/dashboard",
                name: "panel.dashboard",
                component: {},
                meta: {
                    menu: "main"
                },
            },
            {
                path: "/users",
                name: "panel.users",
                redirect: { name: "panel.dashboard" },
                component: {},
                children: [
                    {
                        path: "list",
                        name: "panel.users.list",
                        component: {},
                        meta: {
                            menu: "main"
                        },
                    },
                    {
                        path: "view/:user_id",
                        name: "panel.users.view",
                        component: {},
                    },
                ],
            }
        ],
    }
];

【问题讨论】：

你好。您的“panel.users”路径，没有 meta.menu。那么是否应该将所有这些都与孩子一起完全删除？
您好@ali.rezaie，感谢您抽出宝贵时间研究此问题。不，如果它有孩子，我想保留它。在这种情况下，只有名为“panel.users.view”的对象会被删除。
从下面的代码中，我只需要返回包含 meta.menu 的对象，同时保留结构 - 这将给出[]。您可能需要重新考虑 meta.menu 在父路由中的存在，因为否则如果他们的孩子是主要的，您必须追溯包括它们，这肯定不会让事情变得更容易。你尝试了什么？由于您是 SO 新手，因此您可能想知道“为我编写代码”的问题，这些问题表明没有努力并没有受到欢迎。

标签： javascript vue.js

【解决方案1】：

你可以想象一个看起来像这样的递归函数。

const res = [];
function findMeta(rs) {
  rs.forEach(r => {
      for (let [key, value] of Object.entries(r)) {
        //console.log(`${key}`, value);
                if(key === "children") findMeta(value);
                if(key === "meta") res.push(r);
      }
  })
  return res;
}

const routes = [
    {
        path: "/panel",
        name: "panel",
        redirect: { name: "panel.dashboard" },
        component: {},
        children: [
            {
                path: "/dashboard",
                name: "panel.dashboard",
                component: {},
                meta: {
                    menu: "main"
                },
            },
            {
                path: "/users",
                name: "panel.users",
                redirect: { name: "panel.dashboard" },
                component: {},
                children: [
                    {
                        path: "list",
                        name: "panel.users.list",
                        component: {},
                        meta: {
                            menu: "main"
                        },
                    },
                    {
                        path: "view/:user_id",
                        name: "panel.users.view",
                        component: {},
                    },
                ],
            }
        ],
    }
];

const res = [];
function findMeta(rs) {
  rs.forEach(r => {
      for (let [key, value] of Object.entries(r)) {
        //console.log(`${key}`, value);
				if(key === "children") findMeta(value);
				if(key === "meta") res.push(r);
      }
  })
  return res;
}

console.log(findMeta(routes))

【讨论】：

您好！感谢您花时间写这篇文章。我有一个小问题，这个解决方案导致RangeError: Maximum call stack size exceeded。
@user12922812 好的，抱歉，我没有真正测试就这样做了，这是一个可行的解决方案。