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