ES6 从嵌套对象中获取属性答案

【问题标题】：ES6 get properties from nested objectsES6 从嵌套对象中获取属性
【发布时间】：2018-02-06 10:01:24
【问题描述】：

我正在使用 VueJS、Lodash 和 Babel 做一个项目，我的问题是我需要使用 routes.js 文件中的路由填充我的应用程序中的侧边栏。问题是我真的不知道如何检索我需要的数据。

export default [
  {
    path: "/admin/login",
    name: "admin.login",
    component: Login
  },
  {
    path: "/admin",
    component: MasterLayout,
    meta: { auth: true },
    children: [
      {
        path: "/admin/dashboard",
        alias: "/",
        menu: { text: "", icon: ""},
        name: "admin.dashboard",
        component: DashboardIndex
      }
    ]
  },
  {
    path: '/403',
    name: 'error.forbidden',
    component: ErrorForbidden
  },
  {
    path: "*",
    name: 'error.notfound',
    component: ErrorPageNotFound
  }
];

那是我的路线文件，我基本上需要遍历每条路线，检查它是否有 children 或 menu 属性，如果它有一个菜单，它会被添加到我的侧边栏项目列表，它的孩子也被添加，他们自己的menu属性被撤回

最后我想得到类似下面的东西

sidebarItems: [
 {
  name: 'Dashboard',
  icon: 'dashboard',
  name: 'admin.dashboard'
 }, 
 {
  name: 'OtherRoute',
  icon: 'other-route',
  name: 'admin.other-route',
  children: [
    {
      name: 'SubRoute',
      icon: 'sub-route',
      name: 'admin.sub'
    }
  ]
 }
]

这应该只考虑包含 menu 属性的路由。

【问题讨论】：

同一个对象怎么可能有2个name属性？ name: 'Dashboard' 和名称：例如'admin.dashboard'
@KoushikChatterjee 它们是不同的对象，第一个是原始的 routes.js 对象，另一个是在运行时从初始对象生成的不同的对象

标签： javascript ecmascript-6 lodash javascript-objects

【解决方案1】：

你基本上需要对数组进行迭代递归，所以请试试这个：

function iterateArrayRoutes(routeArray) {
  if(routeArray instanceof Array) {
    var routeFormatted = routeArray.reduce(function(last, route){
      if (route.hasOwnProperty("menu")) {
        var item = {
          name: route.name,
          icon: route.menu.icon
        };
        if(route.hasOwnProperty("children") && route.children.length > 0) {
          item.children = iterateArrayRoutes(route.children);
        }
        last.push(item);
      }
      return last;
    }, []);
    return routeFormatted;
  }
};

这里有一个演示https://jsfiddle.net/vm1hrwLL/

【讨论】：