javascript - 按值分组到数组、includes()、自定义结构

Question

我需要检查路线列表并按路径对它们进行分组，例如 /mens 成为所有其他包含 /mens 的“父路线”，等等关于...我想要的结果是这样的，

const newRoutes = {
  "/kids": [{
    "path": "/kids",
    "name": "kids-clothing-section",
    "children": [{
        "path": "/kids/shoes",
        "name": "kids-clothing-shoes",
      },
      {
        "path": "/kids/shirts",
        "name": "kids-clothing-shirts",
      }
    ]
  }]
}

我知道如何使用 vanilla javascript (reduce) 和 lodash (_.groupBy()) 进行 groupBy。但其余的对我来说太复杂了，尤其是与路径 /path 父级匹配的部分。非常感谢任何帮助!

编辑 因此，并非所有路线都是通往“家”的子路线，我认为应该进行长度检查 path.lenght > 3。

const routes = [{
    path: '/',
    name: 'home',
  },
  {
    path: '/about',
    name: 'about',
  },
  {
    path: '/mens',
    name: 'mens-clothing-section',
  },
  {
    path: '/mens/shoes',
    name: 'mens-clothing-shoes',
  },
  {
    path: '/mens/shoes/:id',
    name: 'mens-clothing-shoes-details'
  },
  {
    path: '/kids',
    name: 'kids-clothing-section',
  },
  {
    path: '/kids/shoes',
    name: 'kids-clothing-shoes',
  },
  {
    path: '/kids/jeans',
    name: 'kids-clothing-jeans',
  },
  {
    path: '/kids/shirts',
    name: 'kids-clothing-shirts',
  },
  {
    path: '/kids/shoes/:id',
    name: 'kids-clothing-shoes-details'
  }
]



const groupedRoutes = routes.reduce(function(obj, route) {
  // get the path of the route
  const path = route.path

  const splitted = path.split('/')[1]

  if (!obj.hasOwnProperty(splitted)) {
    obj[splitted] = []
  }

  obj[splitted].push(route)

  return obj
}, {})

console.log(groupedRoutes)

Answer 1

也许通过使用数组作为结果集，这对您有用。

const
    routes = [{ path: '/', name: 'home' }, { path: '/about', name: 'about' }, { path: '/mens', name: 'mens-clothing-section' }, { path: '/mens/shoes', name: 'mens-clothing-shoes' }, { path: '/mens/shoes/:id', name: 'mens-clothing-shoes-details' }, { path: '/kids', name: 'kids-clothing-section' }, { path: '/kids/shoes', name: 'kids-clothing-shoes' }, { path: '/kids/jeans', name: 'kids-clothing-jeans' }, { path: '/kids/shirts', name: 'kids-clothing-shirts' }, { path: '/kids/shoes/:id', name: 'kids-clothing-shoes-details' }],
    groupedRoutes = routes.reduce(function (r, { path, name }) {
        path
            .split(/(?=\/)/)
            .reduce((a, _, i, p) => {
                var path = p.slice(0, i + 1).join(''),
                    item = a.find(q => q.path === path);

                if (!item) a.push(item = { path, name, children: [] });
                return item.children;
            }, r);            
        return r;
    }, []);
	
   console.log(groupedRoutes);

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

没有不必要的 child 。

const
    routes = [{ path: '/', name: 'home' }, { path: '/about', name: 'about' }, { path: '/mens', name: 'mens-clothing-section' }, { path: '/mens/shoes', name: 'mens-clothing-shoes' }, { path: '/mens/shoes/:id', name: 'mens-clothing-shoes-details' }, { path: '/kids', name: 'kids-clothing-section' }, { path: '/kids/shoes', name: 'kids-clothing-shoes' }, { path: '/kids/jeans', name: 'kids-clothing-jeans' }, { path: '/kids/shirts', name: 'kids-clothing-shirts' }, { path: '/kids/shoes/:id', name: 'kids-clothing-shoes-details' }],
    groupedRoutes = routes.reduce(function (r, { path, name }) {
        path
            .split(/(?=\/)/)
            .reduce((o, _, i, p) => {
                var path = p.slice(0, i + 1).join(''),
                    item = (o.children = o.children || []).find(q => q.path === path);

                if (!item) o.children.push(item = { path, name });
                return item;
            }, r);            
        return r;
    }, { children: [] }).children;
	
   console.log(groupedRoutes);

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