映射嵌套数组并返回匹配数组

Question

我知道，我已经看到了很多相同的问题，但无法得到完整的答案。

因此，我有一个类似这样的数组(简化为演示)：

// links.js

const links = [
 {
  name: 'Page 1',
  path: '/page-1'
 },
 {
  name: 'Page-2',
  subpages:[
   { name: 'Page (2-1)', path: '/page-2-1' },
   { name: 'Page (2-2)', path: '/page-2-2' }
  ]
 },
 {
  name: 'Page 3',
  path: '/page-3'
 },
 {
  name: 'Page 4',
  subpages:[
   { name: 'Page (4-1)', path: '/page-4-1' },
   { name: 'Page (4-2)', path: '/page-4-2' },
   { name: 'Page (4-3)', path: '/page-4-3' }
  ]
 },
 ...
]
export default links

上面的对象是菜单链接数据，我将它们呈现在屏幕上，以便在页面之间运行，而subpages则是下拉的。它们要么是path，要么是subpages，而不是两者都有，而且可能有更多的嵌套。

有两个任务，我需要帮助。

第一：

我网站的每一页都有一个标题，其中大多数都与上面所示的name属性相同。

因此，我在每个页面上都呈现了一个函数，该函数返回当前路由的路径名，所以我想要的是通过links映射并获得匹配path的name。

例如，如果我给出/page-4-1，我想要获得匹配路径的name属性，即name: Page 4

第二

这一次，它有点像面包屑，如果我给['/page-1', '/page-2-1', '/page-4-2']，我想得到：

[
 {
  name: 'Page 1',
  path: '/page-1'
 },
 { 
  name: 'Page (2-1)',
  path: '/page-2-1' 
 },
 { 
  name: 'Page (4-2)',
  path: '/page-4-2' 
 },
]

在某些情况下，可能没有匹配的结果，在这种情况下，我想插入{name: document.body.title, path: null}

我试过了

我在用Nextjs

import { useRouter } from 'next/router'
import links from 'links.js'

const router = useRouter()
const splitted = router.asPath
      .split('/')
      .filter(
        (sp) =>
          sp !== ''
      )

cost ready = []

for (let sp = 0; sp < splitted.length; sp++) {
      for (let ln = 0; ln < links.length; ln++) {
        if (links[ln].path) {
          if (links[ln].path === '/' + splitted[sp]) {
            ready.push(links[ln])
          }
        } else {
          for (let sb = 0; sb < links[ln].sublinks.length; sb++) {
            if (links[ln].sublinks[sb].path === '/' + splitted[sp]) {
              ready.push(links[ln].sublinks[sb])
            }
          }
        }
      }
    }

这在一定程度上是可行的，但很麻烦，map、filter和find应该有一个更好的方法，但我对它们的尝试无法成功。

提前感谢您的帮助！

编辑：

糟了！我的问题是一个很大的错误，links对象只包含path键，而不是条件path和link。

Answer 1

​

const links = [
 {
  name: 'Page 1',
  path: '/page-1'
 },
 {
  name: 'Page-2',
  subpages:[
   { name: 'Page (2-1)', path: '/page-2-1' },
   { name: 'Page (2-2)', path: '/page-2-2' }
  ]
 },
 {
  name: 'Page 3',
  path: '/page-3'
 },
 {
  name: 'Page 4',
  subpages:[
   { name: 'Page (4-1)', path: '/page-4-1' },
   { name: 'Page (4-2)', path: '/page-4-2' },
   { name: 'Page (4-3)', path: '/page-4-3' }
  ]
 },
];
const findPathObj = (path,links) => {
    let result = null;
    for(const item of links){
      if(item.path == path) return item;
      if(item.subpages) result = findPathObj(path, item.subpages)
      if(result) break;  
   }
  return result;
}
const findPageName = (path,links) => findPathObj(path,links)?.name;
const findBreadcrumb = (pathes, links) => pathes.map(path => findPathObj(path,links) || {name: document.title, path: null});

console.log(findPageName('/page-4-1', links));
console.log(findBreadcrumb(['/page-1', '/page-2-1', '/page-4-2'],links))

​

Answer 2

关于您的第一个问题，请尝试以下方法

​

const links = [
  {
    name: "Page 1",
    path: "/page-1",
  },
  {
    name: "Page-2",
    subpages: [
      { name: "Page (2-1)", path: "/page-2-1" },
      { name: "Page (2-2)", path: "/page-2-2" },
    ],
  },
  {
    name: "Page 3",
    link: "/page-3",
  },
  {
    name: "Page 4",
    subpages: [
      { name: "Page (4-1)", link: "/page-4-1" },
      { name: "Page (4-2)", link: "/page-4-2" },
      { name: "Page (4-3)", link: "/page-4-3" },
    ],
  },
];

// Find out function
// Level must 0 at beginning
function findout(pages, search, level = 0) {
  for (const page of pages) {
    if (page.link === search || page.path === search) {
      if (level === 0) {
        return page.name;
      }

      return true;
    }

    if (Array.isArray(page.subpages)) {
      if (findout(page.subpages, search, level + 1)) {
        if (level === 0) {
          return page.name;
        }

        return true;
      }
    }
  }

  return false;
}

console.log(findout(links, "/page-4-3"))

​

我建议的第二个问题是

​

const links = [
  {
    name: "Page 1",
    path: "/page-1",
  },
  {
    name: "Page-2",
    subpages: [
      { name: "Page (2-1)", path: "/page-2-1" },
      { name: "Page (2-2)", path: "/page-2-2" },
    ],
  },
  {
    name: "Page 3",
    link: "/page-3",
  },
  {
    name: "Page 4",
    subpages: [
      { name: "Page (4-1)", link: "/page-4-1" },
      { name: "Page (4-2)", link: "/page-4-2" },
      { name: "Page (4-3)", link: "/page-4-3" },
    ],
  },
];

function findout2(pages, search, result = []) {
  for (const page of pages) {
    if (typeof page.link === "string" && search.includes(page.link)) {
      result.push({ name: page.name, link: page.link });
    } else if (typeof page.path === "string" && search.includes(page.path)) {
      result.push({ name: page.name, path: page.path });
    }

    if (Array.isArray(page.subpages)){
      findout2(page.subpages, search, result)
    }
  }

  return result
}

console.log(findout2(links, ['/page-1', '/page-2-1', '/page-4-2']))

​