javascript - 映射嵌套数组并返回匹配的数组

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，但不能同时有，而且可能有更多嵌套。

有 2 个任务我需要帮助。

首先:

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

所以，我在每个页面上都呈现了一个函数，它返回当前路由的路径名，所以我想要的是通过 links 进行映射并获取 name匹配的路径。
例如，如果我给 /page-4-1，我想获取匹配路径的名称属性，即 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))