我知道，我已經看到了很多相同的問題，但無法得到完整的答案。
所以，我有一個這樣的陣列（為了演示而簡化）：
// 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',
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' }
]
},
...
]
export default links
上面的物件是選單鏈接資料，我將它們呈現在螢屏上以便在頁面之間導航并且subpages是下拉選單。他們有link或subpages，不是兩者都有，而且可能有更多的嵌套。
有 2 個任務我需要幫助。
第一的：
每個頁面都有一個標題，其中大部分與name上面顯示的屬性相同。
因此，我在每個頁面上都呈現了一個函式，該函式回傳當前路由的路徑名，所以我想要的是映射links并獲取name匹配的link.
例如，如果我給/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)',
link: '/page-4-2'
},
]
在某些情況下可能沒有匹配的結果，在這種情況下我想插入 {name: document.body.title, link: null}
我試過
我正在使用 Nextjs
import { useRouter } from 'next/router'
const router = useRouter()
const splitted = router.asPath
.split('/')
.filter(
(sp) =>
sp !== ''
)
cost ready2 = []
for (let sp = 0; sp < splitted.length; sp ) {
for (let ln = 0; ln < links.length; ln ) {
if (links[ln].link) {
if (links[ln].link.pathname === '/' splitted[sp]) { // in the actual object the link property has a pathname property, i just simpilied
ready2.push(links[ln])
}
} else {
for (let sb = 0; sb < links[ln].sublinks.length; sb ) {
if (links[ln].sublinks[sb].link.pathname === '/' splitted[sp]) {
ready2.push(links[ln].sublinks[sb])
}
}
}
}
}
這部分的作業，但凌亂的，應該有一個更好的方式map，filter和find，但我不能用我對他們的嘗試取得成功。
預先感謝您的幫助！
uj5u.com熱心網友回復：
對于您的第一個問題，請嘗試以下操作
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']))uj5u.com熱心網友回復：
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' }
]
},
];
const findPathObj = (path,links) => {
let result = null;
for(const item of links){
if(item.link == path || item.path == path) result = item;
if(item.subpages) result = findPathObj(path, item.subpages)
if(result) break;
}
return result;
}
const findPageName = (path,links) => findPathObj(path,links)?.name;
const findBreadcrumb = (path, links) => path.map(path => findPathObj(path,links) || {name: document.title, link: null});
console.log(findPageName('/page-4-1', links));
console.log(findBreadcrumb(['/page-1', '/page-2-1', '/page-4-2'],links))轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/392822.html
標籤：javascript 数组 筛选