我有這個嵌套物件：
const menus = {
path: '/actions/step',
icon: 'fa fa-wine-bottle',
title: 'Fasi',
children: [
{
path: '/actions/step/analysis',
title: 'Analisi'
},
{
path: '/actions/step/import',
title: 'Importazione'
},
{
path: '/actions/step/squeeze',
title: 'Spremitura'
},
{
path: '/actions/step/move',
title: 'Spostamento'
},
{
path: '/actions/step/splitauto',
title: 'Travaso Guidato'
},
{
path: '/actions/step/stir',
title: 'Rimestaggio'
},
{
path: '/actions/step/clarify',
title: 'Chiarifica'
},
{
path: '/actions/step/stabilization',
title: 'Stabilizzazione'
},
{
path: '/actions/step/bottling',
title: 'Imbottigliamento'
},
{
path: '/actions/step/clean',
title: 'Pulizia'
},
{
path: '/actions/step/clean_close',
title: 'Pulizia e Chiusura'
},
{
path: '/actions/step/add_product',
title: 'Aggiunta Prodotto'
},
]
},
{
path: '/actions',
icon: 'fa fa-tasks',
title: 'Azioni',
children: [
{
path: '/actions/type',
title: 'Tipi di Azione'
},
{
path: '/actions/list',
title: 'Lista delle Azioni'
},
{
path: '/actions/traceability',
title: 'Tracciabilità'
}
]
},
{
path: '/warehouse',
icon: 'fa fa-warehouse',
title: 'Magazzino',
children: [
{
path: '/warehouse/list-warehouse-item',
title: 'Lista Oggetti',
children: [
{
path: '/warehouse/new-warehouse-item',
title: 'Nuovo Oggetto'
}
]
},
]
},
{
path: '/suppliers',
icon: 'fa fa-truck',
title: 'Fornitori',
children: [
{
path: '/suppliers/list-suppliers',
title: 'Lista Fornitori',
children: [
{
path: '/suppliers/new-supplier',
title: 'Nuovo Fornitore'
}
]
}
]
}
我想要實作的是根據路徑值過濾嵌套物件。
所以如果我有/actions/step/import我想要這個：
[{
path: '/actions/step',
icon: 'fa fa-wine-bottle',
title: 'Fasi'
},
{
path: '/actions/step/import',
title: 'Importazione'
}]
或者如果/warehouse/new-warehouse-item我有：
[{
path: '/warehouse',
icon: 'fa fa-warehouse',
title: 'Magazzino'
},
{
path: '/warehouse/list-warehouse-item',
title: 'Lista Oggetti'
},
{
path: '/warehouse/new-warehouse-item',
title: 'Nuovo Oggetto'
}]
我試圖做的是像這樣過濾，但它不完整（this.$router.history.current.path包含字串路徑）：
menus.filter(menu => {
if(menu.children){
return menu.children.some(child => {
if(child.children){
return child.children.some(nephew => {
return nephew.path === this.$router.history.current.path;
})
} else {
return child.path === this.$router.history.current.path;
}
})
} else {
return menu.path === this.$router.history.current.path;
}
});
uj5u.com熱心網友回復：
以下遞回代碼給出了請求的過濾。請注意，為了測驗目的，我將給定的資料“選單”包含在一個陣列中。
cnt 變數 (int) 用于除錯目的并指示遞回級別。可以省略。
items 變數（物件陣列）是包含物件的初始陣列。
目標變數（字串）是所需的路徑。
sol 變數（物件陣列）是一個最初為空的陣列，它將填充通向目標的路徑。它必須在對 itemFilter 的任何新呼叫之前清除
let cnt = 0 //For debugging only
const itemFilter= function(items, target, cnt, sol ) {
cnt = 1
for( let i = 0; i<items.length; i ) {
let item = items[i]
if ( item.path == target) {
sol.push(item)
//console.log("DEBUG 1 : ", cnt, i, item.path, "Hit")
//console.log(sol)
return sol
}
//Otherwise...
//console.log(cnt, i, item.path, "No hit")
if (item.children) {
itemFilter(item.children, target, cnt, sol)
//console.log("DEBUG 2 : ", cnt, i)
//console.log(sol)
if (sol.length > 0) {
sol.push(item)
return sol
}
}
}
}
console.log("Suggested solution")
console.log("--------------------------------------------------------")
let t = "/actions/step/import"
console.log("CASE 1 : ", t)
let filteredItems = []
itemFilter(menus, t, 0, filteredItems)
console.log(filteredItems)
console.log("--------------------------------------------------------")
t = "/warehouse/new-warehouse-item"
console.log("CASE 2 : ", t)
filteredItems = []
itemFilter(menus, t, 0, filteredItems)
console.log(filteredItems)
console.log("--------------------------------------------------------")
t = "/UNDEFINEDPATH/anything"
console.log("CASE 3 : ", t)
filteredItems = []
itemFilter(menus, t, 0, filteredItems)
console.log(filteredItems)
/*This is the console output (without debugging) :
Suggested solution
--------------------------------------------------------
CASE 1 : /actions/step/import
[ { path: '/actions/step/import', title: 'Importazione' },
{ path: '/actions/step',
icon: 'fa fa-wine-bottle',
title: 'Fasi',
children:
[ [Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object] ] } ]
--------------------------------------------------------
CASE 2 : /warehouse/new-warehouse-item
[ { path: '/warehouse/new-warehouse-item',
title: 'Nuovo Oggetto' },
{ path: '/warehouse/list-warehouse-item',
title: 'Lista Oggetti',
children: [ [Object] ] },
{ path: '/warehouse',
icon: 'fa fa-warehouse',
title: 'Magazzino',
children: [ [Object] ] } ]
--------------------------------------------------------
CASE 3 : /UNDEFINEDPATH/anything
[]
*/
uj5u.com熱心網友回復：
基于@Myrer 的出色貢獻，為了省略子物件，我像這樣編輯了他的腳本：
const itemFilter = function(items, target, sol) {
for(let i = 0; i < items.length; i ) {
let item = items[i];
if (item.path === target) {
const itemToPush = {
path: item.path,
title: item.title
};
if(item.icon){
itemToPush['icon'] = item.icon;
}
sol.push(itemToPush);
return sol;
}
if (item.children) {
itemFilter(item.children, target, sol);
if (sol.length > 0) {
const itemToPush = {
path: item.path,
title: item.title
};
if(item.icon){
itemToPush['icon'] = item.icon;
}
sol.push(itemToPush);
return sol;
}
}
}
}
let t = '/warehouse/new-warehouse-item';
let filteredItems = [];
itemFilter(this.menus, t, filteredItems);
console.log(filteredItems.reverse()); // Reversed the order of the array
// Output:
// [
// {
// "path": "/warehouse",
// "title": "Magazzino",
// "icon": "fa fa-warehouse"
// },
// {
// "path": "/warehouse/list-warehouse-item",
// "title": "Lista Oggetti"
// },
// {
// "path": "/warehouse/new-warehouse-item",
// "title": "Nuovo Oggetto"
// }
// ]
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/386038.html
標籤：javascript 数组 目的 筛选