javascript - 递归过滤 bool 键的数据

Question

我的导航从 vue-router 获取路线，这样我就不必手动添加它们。

这些路由及其子路由都有一个名为“inMenu”的元 bool 键。我只过滤了父路由，但没有过滤子路由。

var res = this.$router.options.routes.filter(function f(o) {
  if (o.route.meta.inMenu === true) return true

  if (o.children) {
    return (o.children = o.children.filter(f)).length
  }
})

这就是我过滤父路由的方式，但我无法管理它来过滤子路由。

return this.$router.options.routes.filter(route => route.meta.inMenu === true);

这是一些示例数据:

{
  "path": "/orders",
  "component": {
    "name": "Orders",
    "__file": "src/views/Orders.vue",
  },
  "meta": {
    "icon": "fa-history",
    "title": "Abwicklungen",
    "inMenu": true
  },
  "children": [
    {
      "path": "list",
      "name": "orderList",
      "component": {
        "name": "OrderList",
        "__file": "src/views/orders/list.vue",
      },
      "meta": {
        "title": "Bestellliste",
        "icon": "fa-circle-o",
        "inMenu": true
      }
    },
    {
      "path": "details/:id",
      "name": "orderDetails",
      "component": {
        "name": "OrderDetails",
        "__file": "src/views/orders/details.vue"
      },
      "meta": {
        "title": "Bestellung",
        "icon": "fa-circle-o",
        "inMenu": false
      }
    },
    {
      "path": "dailyclosing",
      "component": {
        "name": "OrderList",
        "__file": "src/views/orders/list.vue",
      },
      "meta": {
        "title": "Tagesabschluss",
        "icon": "fa-check",
        "inMenu": true
      }
    }
  ]
}

如果 inMenu 为 false，我希望不显示每条路线和子路线。

Answer 1

假设您希望所有对象都具有真正的 inMenu 属性，您可以使用新的子对象构建一个新数组。没有 true inMenu 项目的分支将被过滤掉。

function filter(array) {
    return array.reduce((r, { children = [], ...o }) => {
        children = filter(children);
        if (o.meta.inMenu || children.length) r.push(Object.assign({}, o, children.length && { children }));
        return r;
    }, [])
}

var data = [{ path: "/orders", meta: { icon: "fa-history", title: "Abwicklungen", inMenu: true }, children: [{ path: "list", name: "orderList", meta: { title: "Bestellliste", icon: "fa-circle-o", inMenu: true } }, { path: "details/:id", name: "orderDetails", meta: { title: "Bestellung", icon: "fa-circle-o", inMenu: false } }, { path: "dailyclosing", meta: { title: "Tagesabschluss", icon: "fa-check", inMenu: true } }] }, { path: "/orders", meta: { icon: "fa-history", title: "Abwicklungen", inMenu: false }, children: [{ path: "list", name: "orderList", meta: { title: "Bestellliste", icon: "fa-circle-o", inMenu: true } }, { path: "details/:id", name: "orderDetails", meta: { title: "Bestellung", icon: "fa-circle-o", inMenu: false } }, { path: "dailyclosing", meta: { title: "Tagesabschluss", icon: "fa-check", inMenu: true } }] }],
    result = filter(data);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }