提示：底部有完整的源碼，童鞋們有需要可以CTRL + C拿走，但我建議你能真正理解實現(xiàn)原理，而不是直接CTRL + C。
樹是JS中非常常見的數(shù)據(jù)結構。知識庫目錄，側邊欄菜單，字典目錄，企業(yè)組織架構等都可能會用到樹的操作。
不知道大家有沒有使用過element-ui等組件庫中的級聯(lián)選擇器？它所接收的數(shù)據(jù)類型就是樹形結構的數(shù)組。級聯(lián)選擇器的綁定值是被選中的一系列父子節(jié)點id構成的數(shù)組，而后端通常僅需要我們提供最后一個葉子節(jié)點的id；然而，在編輯的時候，我們僅提供最后一個葉子節(jié)點的id是無法還原級聯(lián)選擇器選項的選中狀態(tài)的；所以，我們需要通過該節(jié)點id將與其關聯(lián)的父節(jié)點全部查找出來，得到一個與級聯(lián)選擇器適配的數(shù)據(jù)。
現(xiàn)在，我們實現(xiàn)根據(jù)節(jié)點id查找關聯(lián)的父節(jié)點函數(shù)getTreeIds。我們先定義一個空函數(shù)，該函數(shù)需要接收3個參數(shù)：樹形結構數(shù)組tree，節(jié)點id，節(jié)點信息配置config。config用于配置id和children字段，因為這是一個通用函數(shù)，我們需要應對后端開發(fā)者使用的children和id字段可能存在的不統(tǒng)一問題。
export const getTreeIds = (tree, nodeId, config) => {}
下面的所有代碼全部寫在getTreeIds函數(shù)體內。現(xiàn)在，我們從config中拿到children和id字段，并分別設置一個默認值。
const { children = 'children', id = 'id' } = config || {}
假設我們的數(shù)據(jù)結構是下面這樣的，該如何通過子節(jié)點查找父節(jié)點呢？我們都知道，父子節(jié)點的關聯(lián)是通過children字段建立的。可惜這個關聯(lián)是單向的，我們只能通過父節(jié)點查找子節(jié)點，而不能通過子節(jié)點查找父節(jié)點，因為我們的子節(jié)點缺少對父節(jié)點的引用。
[
{
id: 1,
label: 'test1',
children: [
{
id: 2,
label: 'test1-1',
children: [ { id: 3, label: 'test1-1-1' }]
}
]
}
]
我們需要編寫一個函數(shù)手動將子節(jié)點與父節(jié)點建立綁定。最簡單的查找方式就是將樹形結構轉化為扁平化數(shù)組，并建立關聯(lián)，然后再進行查找。
toFlatArray函數(shù)的源碼如下，我們使用數(shù)組的reduce方法對樹形結構數(shù)組進行聚合遞歸轉化為扁平化的樹，將parentId字段添加到子節(jié)點，這樣我們就建立了子節(jié)點到父節(jié)點的關聯(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ù)接收一個扁平化的樹，使用while循環(huán)進行查找，如果存在parentId，我們就把它添加到ids數(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
}
最后，我們在getTreeIds函數(shù)體的尾部，將標準樹轉化為扁平化的樹后傳遞給getIds函數(shù)返回的ids數(shù)組返回。
return getIds(toFlatArray(tree))
現(xiàn)在，我們大功告成了。我們可以用一些假數(shù)據(jù)測試一下：
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]
童鞋們，學會了嗎？是不是很簡單？大家還有什么疑問，都可以問我。感謝閱讀！
