递归过滤布尔键的数据

Question

我的导航从 vue-router 获取路由，这样我就不用手动添加了。

这些路由以及它们的子路由都有一个名为“inMenu”的元布尔键。我只过滤了父路由而不是子路由。

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

我假设：

1. 数组中有多个路径对象。
2. 每个路径对象都包含一个根级元键和一个子键。
3. 如果根元键的 inMenu 值返回 false，我们会过滤掉整个对象（包括其子对象）。
4. children 本身不再包含任何孩子。

所以我们在数组上应用reduce，检查对象的根 inMenu 是否为真，如果是，它将在过滤其子项时重建自身。通过 short 辅助函数过滤子项。

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

const f = arr => arr.filter(o => o.meta.inMenu);

let res = data.reduce((a,c) => (c.meta.inMenu && a.push({...c, children: f(c.children)}), a),[]);

console.log(res)

Answer 2

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

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; }

Answer 3

这是一个有效的 sn-p。我认为您只需要以我更改的方式更新您的功能。当然我这里没有使用 vue.js 路由。这只是一个示例。您需要根据需要进行更新。我想你会从这里了解你的功能有什么问题。

var data = [{
  "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
      }
    }
  ]
}];


var res = data.filter(function f(o) {
  if (o.children) {
    return (o.children = o.children.filter(f)).length
  }
  if (o.meta.inMenu === true) return true;
  return false;
})

console.log(res);