首頁(yè) 猿問(wèn) 通過(guò)給定索引解析具有嵌套對(duì)象的數(shù)組...

通過(guò)給定索引解析具有嵌套對(duì)象的數(shù)組，獲取其名稱

JavaScript

繁星點(diǎn)點(diǎn)滴滴 2022-09-23 16:30:20

鏈接到沙盒：https://codesandbox.io/s/cool-northcutt-7c9sr我有一個(gè)帶家具的目錄，我需要制作動(dòng)態(tài)面包屑。有一個(gè)數(shù)組，其中包含 5 層深的嵌套對(duì)象。當(dāng)我渲染家具列表時(shí)，我會(huì)保存此列表數(shù)組中的所有索引。預(yù)期輸出：使用我的索引，我需要解析具有嵌套數(shù)組的對(duì)象，獲取屬于該索引的每個(gè)對(duì)象的名稱并將其保存在數(shù)組中用戶單擊清單時(shí)保存的索引。鍵是對(duì)象名稱，屬性是實(shí)際索引。menuIndexes : { buildings: 0, building_styles: 3, rooms: 2, room_fillings: 0, filling_types: 1,}那段數(shù)據(jù)，我從家具列表渲染。名稱屬性是菜單中鏈接的名稱{ buildings: [ { name: 'office', building_styles: [ { name: 'interior', rooms: [ { name: 'open space', filling_types: [ { name: 'furniture', room_fillings: [ { name: 'items', // rendering inventories inventories: [ { id: 1, name: 'tv' }, { id: 2, name: 'chair' }, { id: 3, name: 'table' }, ] } ] } ] } ] }, ] }, ]}此圖像用于了解我在哪里獲得此保存的索引我試圖制作遞歸函數(shù)，但它只得到第一個(gè)數(shù)組，不會(huì)進(jìn)一步進(jìn)入嵌套數(shù)組 const displayBreadCrumbs = () => { let menuKeys = Object.keys(menuIndexes) console.log({ menuIndexes }); console.log(file); let arr = [] let i = 0 let pathToParse = file if (i < menuKeys.length) { if (menuKeys[i] in pathToParse) { pathToParse = pathToParse[menuKeys[i]][menuIndexes[menuKeys[i]]] console.log('pathToParse', pathToParse); i = i + 1 // displayBreadCrumbs() } } }

查看完整描述

3 回答

喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可以遍歷中的每個(gè)鍵值對(duì)對(duì)象，以查看哪個(gè)鍵屬于當(dāng)前對(duì)象。獲得適用于當(dāng)前對(duì)象的鍵后，您可以訪問(wèn)其關(guān)聯(lián)的數(shù)組以及需要查看的索引。找到鍵值對(duì)后，可以從條目中刪除鍵值對(duì)，然后再次以遞歸方式查找新對(duì)象中的下一個(gè)鍵。您可以繼續(xù)此操作，直到找不到屬于當(dāng)前對(duì)象的鍵（即：findIndex返回-1）;menuIndexespathToParsemenuIndexesdata

const pathToParse = { buildings: [ { name: 'office', building_styles: [ { name: 'interior', rooms: [ { name: 'open space', filling_types: [ { name: 'furniture', inventories: [{ id: 1, name: 'tv' }, { id: 2, name: 'chair' }, { id: 3, name: 'table' }, ] } ] } ] }, ] }, ] }

const menuIndexes = {

buildings: 0,

building_styles: 0,

rooms: 0,

room_fillings: 0,

filling_types: 0,

}

function getPath(data, entries) {

const keyIdx = entries.findIndex(([key]) => key in data);

if(keyIdx <= -1)

return [];

const [objKey, arrIdx] = entries[keyIdx];

const obj = data[objKey][arrIdx];

entries.splice(keyIdx, 1);

return [obj.name].concat(getPath(obj, entries));

}

console.log(getPath(pathToParse, Object.entries(menuIndexes)));

的用途是搜索對(duì)象以查找要查看的鍵（因?yàn)槲覀儾幌胍蕾囉趯?duì)象的鍵排序）。如果您對(duì) 有更多的控制權(quán)，則可以將其存儲(chǔ)在一個(gè)數(shù)組中，您可以在其中安全地依賴元素的順序，從而依賴鍵：Object.entries()datamenuIndexesmenuIndexes

const pathToParse = { buildings: [ { name: 'office', building_styles: [ { name: 'interior', rooms: [ { name: 'open space', filling_types: [ { name: 'furniture', inventories: [{ id: 1, name: 'tv' }, { id: 2, name: 'chair' }, { id: 3, name: 'table' }, ] } ] } ] }, ] }, ] };

const menuIndexes = [{key: 'buildings', index: 0}, {key: 'building_styles', index: 0}, {key: 'rooms', index: 0}, {key: 'filling_types', index: 0}, {key: 'inventories', index: 0}, ];

function getPath(data, [{key, index}={}, ...rest]) {

if(!key)

return [];

const obj = data[key][index];

return [obj.name, ...getPath(obj, rest)];

}

console.log(getPath(pathToParse, menuIndexes));

反對(duì) 回復(fù) 2022-09-23

慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊

像往常一樣，我會(huì)在一些可重用的部件上構(gòu)建這樣的函數(shù)。這是我的方法：

// Utility functions

const path = (obj, names) =>

names .reduce ((o, n) => (o || {}) [n], obj)

const scan = (fn, init, xs) =>

xs .reduce (

(a, x, _, __, n = fn (a .slice (-1) [0], x)) => [...a, n],

[init]

) .slice (1)

const pluck = (name) => (xs) =>

xs .map (x => x [name])

// Main function

const getBreadCrumbs = (data, indices) =>

pluck ('name') (scan (path, data, Object .entries (indices)))

// Sample data

const data = {buildings: [{name: "office", building_styles: [{building_style: 0}, {building_style: 1}, {building_style: 2}, {name: "interior", rooms: [{room: 0}, {room: 1}, {name: "open space", filling_types: [{filling_type: 0}, {name: "furniture", room_fillings: [{name: "items", inventories: [{id: 1, name: "tv"}, {id: 2, name: "chair"}, {id: 3, name: "table"}]}, {room_filling: 1}]}, {filling_type: 2}]}, {room: 3}]}, {building_style: 4}]}]}

const menuIndexes = {buildings: 0, building_styles: 3, rooms: 2, filling_types: 1, room_fillings: 0}

// Demo

console .log (getBreadCrumbs (data, menuIndexes))

我們這里有三個(gè)可重用的函數(shù)：

path 采用一個(gè)對(duì)象和節(jié)點(diǎn)名稱（字符串或整數(shù)）列表，并在給定路徑處返回值，或者如果缺少任何節(jié)點(diǎn)，則返回值。¹ 例如：undefined
```
path ({a: {b: [{c: 10}, {c: 20}, {c: 30}, {c: 40}]}}, ['a', 'b', 2, 'c']) //=> 30.
```
scan 與非常相似，不同之處在于它不返回最終值，而是返回在每個(gè)步驟中計(jì)算的值的列表。例如，如果是，則：Array.prototype.reduceadd(x, y) => x + y
```
scan (add, 0, [1, 2, 3, 4, 5]) //=> [1, 3, 6, 10, 15]
```

拔出將命名屬性從每個(gè)對(duì)象列表中拉出：

pluck ('b') ([{a: 1, b: 2, c: 3}, {a: 10, b: 20, c: 30}, {a: 100, b: 200, c: 300}]) 
//=> [2, 20, 200]

在實(shí)踐中，我實(shí)際上會(huì)進(jìn)一步考慮這些幫助器，根據(jù) 定義來(lái)定義，并在定義中使用和。但這對(duì)這個(gè)問(wèn)題并不重要。pathconst prop = (obj, name) => (obj || {}) [name]const last = xs => xs.slice (-1) [0]const tail = (xs) => xs .slice (-1)scan

然后，我們的 main 函數(shù)可以簡(jiǎn)單地使用這些條目以及 ²，首先從索引中獲取條目，將該條目、我們的函數(shù)和數(shù)據(jù)傳遞給相關(guān)對(duì)象節(jié)點(diǎn)的列表，然后將結(jié)果與我們要提取的字符串一起傳遞給。Object.entriespathscanpluck'name'

我?guī)缀趺刻於际褂谩?不太常見，但它足夠重要，它被包含在我通常的實(shí)用程序庫(kù)中。有了這樣的功能，編寫類似的東西就非常簡(jiǎn)單了。pathpluckscangetBreadCrumbs

¹ 旁注，我通常將其定義為，我發(fā)現(xiàn)這是最常用的。此表單恰好更適合所使用的代碼，但是將代碼調(diào)整為我的首選形式很容易：而不是，我們可以只編寫(names) => (obj) => ...scan (path, data, ...)scan ((a, ns) => path (ns) (a), data, ...)

² 正如尼克·帕森斯（Nick Parsons）的回答和感謝的評(píng)論所指出的那樣，將此信息存儲(chǔ)在一個(gè)顯式排序的數(shù)組中是有一個(gè)很好的論據(jù)，而不是依賴于一般對(duì)象獲得的奇怪和任意的順序。如果這樣做，則此代碼只能通過(guò)刪除 main 函數(shù)中的調(diào)用來(lái)更改。Object .entries

反對(duì) 回復(fù) 2022-09-23

慕斯709654

TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊

您可以像這樣定義一個(gè)遞歸函數(shù)，它循環(huán)訪問(wèn)鍵并在數(shù)據(jù)中找到相應(yīng)的對(duì)象。找到數(shù)據(jù)后，它會(huì)將名稱推送到輸出數(shù)組中，并使用此對(duì)象再次調(diào)用該函數(shù)，并且menuIndexesmenuIndexes

const displayBreadCrumbs = (data, menuIndexes) => {

const output = [];

Object.keys(menuIndexes).forEach(key => {

if (data[key] && Array.isArray(data[key]) && data[key][menuIndexes[key]]) {

output.push(data[key][menuIndexes[key]].name);

output.push(...displayBreadCrumbs(data[key][menuIndexes[key]], menuIndexes));

}

});

return output;

};

const data = { buildings: [ { name: 'office', building_styles: [ { name: 'interior', rooms: [ { name: 'open space', filling_types: [ { name: 'furniture', inventories: [{ id: 1, name: 'tv' }, { id: 2, name: 'chair' }, { id: 3, name: 'table' }, ] } ] } ] }, ] }, ] };

const menuIndexes = {

buildings: 0,

building_styles: 0,

rooms: 0,

room_fillings: 0,

filling_types: 0,

};

displayBreadCrumbs(data, menuIndexes); // ["office", "interior", "open space", "furniture"]

反對(duì) 回復(fù) 2022-09-23

3 回答
0 關(guān)注
115 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

通過(guò)給定索引解析具有嵌套對(duì)象的數(shù)組，獲取其名稱

通過(guò)給定索引解析具有嵌套對(duì)象的數(shù)組，獲取其名稱

3 回答

添加回答

通過(guò)給定索引解析具有嵌套對(duì)象的數(shù)組，獲取其名稱

通過(guò)給定索引解析具有嵌套對(duì)象的數(shù)組，獲取其名稱