偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

JS中樹(shù)的查找:通過(guò)子節(jié)點(diǎn)ID查找所有關(guān)聯(lián)的父節(jié)點(diǎn)

開(kāi)發(fā) 前端
樹(shù)是JS中非常常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)。知識(shí)庫(kù)目錄,側(cè)邊欄菜單,字典目錄,企業(yè)組織架構(gòu)等都可能會(huì)用到樹(shù)的操作。

提示:底部有完整的源碼,童鞋們有需要可以CTRL + C拿走,但我建議你能真正理解實(shí)現(xiàn)原理,而不是直接CTRL + C。

樹(shù)是JS中非常常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)。知識(shí)庫(kù)目錄,側(cè)邊欄菜單,字典目錄,企業(yè)組織架構(gòu)等都可能會(huì)用到樹(shù)的操作。

不知道大家有沒(méi)有使用過(guò)element-ui等組件庫(kù)中的級(jí)聯(lián)選擇器?它所接收的數(shù)據(jù)類型就是樹(shù)形結(jié)構(gòu)的數(shù)組。級(jí)聯(lián)選擇器的綁定值是被選中的一系列父子節(jié)點(diǎn)id構(gòu)成的數(shù)組,而后端通常僅需要我們提供最后一個(gè)葉子節(jié)點(diǎn)的id;然而,在編輯的時(shí)候,我們僅提供最后一個(gè)葉子節(jié)點(diǎn)的id是無(wú)法還原級(jí)聯(lián)選擇器選項(xiàng)的選中狀態(tài)的;所以,我們需要通過(guò)該節(jié)點(diǎn)id將與其關(guān)聯(lián)的父節(jié)點(diǎn)全部查找出來(lái),得到一個(gè)與級(jí)聯(lián)選擇器適配的數(shù)據(jù)。

現(xiàn)在,我們實(shí)現(xiàn)根據(jù)節(jié)點(diǎn)id查找關(guān)聯(lián)的父節(jié)點(diǎn)函數(shù)getTreeIds。我們先定義一個(gè)空函數(shù),該函數(shù)需要接收3個(gè)參數(shù):樹(shù)形結(jié)構(gòu)數(shù)組tree,節(jié)點(diǎn)id,節(jié)點(diǎn)信息配置config。config用于配置id和children字段,因?yàn)檫@是一個(gè)通用函數(shù),我們需要應(yīng)對(duì)后端開(kāi)發(fā)者使用的children和id字段可能存在的不統(tǒng)一問(wèn)題。

export const getTreeIds = (tree, nodeId, config) => {}

下面的所有代碼全部寫在getTreeIds函數(shù)體內(nèi)?,F(xiàn)在,我們從config中拿到children和id字段,并分別設(shè)置一個(gè)默認(rèn)值。

const { children = 'children', id = 'id' } = config || {}

假設(shè)我們的數(shù)據(jù)結(jié)構(gòu)是下面這樣的,該如何通過(guò)子節(jié)點(diǎn)查找父節(jié)點(diǎn)呢?我們都知道,父子節(jié)點(diǎn)的關(guān)聯(lián)是通過(guò)children字段建立的??上н@個(gè)關(guān)聯(lián)是單向的,我們只能通過(guò)父節(jié)點(diǎn)查找子節(jié)點(diǎn),而不能通過(guò)子節(jié)點(diǎn)查找父節(jié)點(diǎn),因?yàn)槲覀兊淖庸?jié)點(diǎn)缺少對(duì)父節(jié)點(diǎn)的引用。

[
{
id: 1,
label: 'test1',
children: [
{
id: 2,
label: 'test1-1',
children: [ { id: 3, label: 'test1-1-1' }]
}
]
}
]

我們需要編寫一個(gè)函數(shù)手動(dòng)將子節(jié)點(diǎn)與父節(jié)點(diǎn)建立綁定。最簡(jiǎn)單的查找方式就是將樹(shù)形結(jié)構(gòu)轉(zhuǎn)化為扁平化數(shù)組,并建立關(guān)聯(lián),然后再進(jìn)行查找。

toFlatArray函數(shù)的源碼如下,我們使用數(shù)組的reduce方法對(duì)樹(shù)形結(jié)構(gòu)數(shù)組進(jìn)行聚合遞歸轉(zhuǎn)化為扁平化的樹(shù),將parentId字段添加到子節(jié)點(diǎn),這樣我們就建立了子節(jié)點(diǎn)到父節(jié)點(diǎn)的關(guān)聯(lián)。

const toFlatArray = (tree, parentId) => {
return tree.reduce((t, _) => {
const child = _[children]
return [
...t,
parentId ? { ..._, parentId } : _,
...(child && child.length ? toFlatArray(child, _[id]) : [])]
}, [])
}

然后,我們創(chuàng)建getIds函數(shù),該函數(shù)接收一個(gè)扁平化的樹(shù),使用while循環(huán)進(jìn)行查找,如果存在parentId,我們就把它添加到ids數(shù)組的開(kāi)頭,一直查找到樹(shù)的根部。最后,我們返回ids數(shù)組。

const getIds = flatArray => {
let ids = [nodeId]
let child = flatArray.find(_ => _[id] === nodeId)
while (child && child.parentId) {
ids = [child.parentId, ...ids]
child = flatArray.find(_ => _[id] === child.parentId)
}
return ids
}

最后,我們?cè)趃etTreeIds函數(shù)體的尾部,將標(biāo)準(zhǔn)樹(shù)轉(zhuǎn)化為扁平化的樹(shù)后傳遞給getIds函數(shù)返回的ids數(shù)組返回。

return getIds(toFlatArray(tree))

現(xiàn)在,我們大功告成了。我們可以用一些假數(shù)據(jù)測(cè)試一下:

const treeData = [
{
id: 1,
label: 'test1',
children: [
{
id: 2,
label: 'test1-1',
children: [
{
id: 3,
label: 'test1-1-1'
},
{
id: 4,
label: 'test1-1-2',
children: [
{
id: 5,
label: 'test1-1-1-1'
}
]
}
]
}
]
}
]
console.log(getTreeIds(treeData, 5)) // 輸出 [1, 2, 4, 5]
console.log(getTreeIds(treeData, 3)) // 輸出 [1, 2, 3]

童鞋們,學(xué)會(huì)了嗎?是不是很簡(jiǎn)單?

責(zé)任編輯:姜華 來(lái)源: 今日頭條
相關(guān)推薦

2011-08-18 13:31:44

SQL Server數(shù)子節(jié)點(diǎn)查詢所有父節(jié)點(diǎn)

2023-06-16 07:48:51

DOM對(duì)象JS

2014-11-17 09:51:39

PHP

2023-11-03 08:08:00

MySQL子節(jié)點(diǎn)

2023-02-13 11:26:03

符號(hào)鏈接Linux

2023-07-18 07:19:59

2024-10-24 10:16:36

2023-01-30 14:27:14

Linux進(jìn)程

2022-04-15 10:37:00

權(quán)限進(jìn)程UAC

2020-12-22 08:56:51

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2021-09-03 08:58:00

二叉搜索樹(shù)節(jié)點(diǎn)

2023-01-28 08:24:28

MySQL索引B+樹(shù)

2022-12-26 00:51:33

雙向鏈表二叉搜索樹(shù)

2022-05-10 07:20:18

Linux系統(tǒng)密碼

2017-10-10 16:59:28

Java數(shù)據(jù)結(jié)構(gòu)算法解析

2009-11-06 14:51:14

WCF配置子節(jié)點(diǎn)

2020-11-04 09:46:40

Volodya漏洞惡意軟件

2023-05-08 15:57:16

二叉樹(shù)數(shù)據(jù)結(jié)構(gòu)

2012-04-09 16:22:43

C#

2010-09-08 15:13:09

Node節(jié)點(diǎn)Node屬性
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)