提示：底部有完整的源碼，童鞋們有需要可以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)單?