提示：底部有完整的源碼，童鞋們有需要可以CTRL + C拿走，但我建議你能真正理解實現原理，而不是直接CTRL + C。

樹是JS中非常常見的數據結構。知識庫目錄，側邊欄菜單，字典目錄，企業組織架構等都可能會用到樹的操作。

不知道大家有沒有使用過element-ui等組件庫中的級聯選擇器?它所接收的數據類型就是樹形結構的數組。級聯選擇器的綁定值是被選中的一系列父子節點id構成的數組，而后端通常僅需要我們提供最后一個葉子節點的id;然而，在編輯的時候，我們僅提供最后一個葉子節點的id是無法還原級聯選擇器選項的選中狀態的;所以，我們需要通過該節點id將與其關聯的父節點全部查找出來，得到一個與級聯選擇器適配的數據。

現在，我們實現根據節點id查找關聯的父節點函數getTreeIds。我們先定義一個空函數，該函數需要接收3個參數：樹形結構數組tree，節點id，節點信息配置config。config用于配置id和children字段，因為這是一個通用函數，我們需要應對后端開發者使用的children和id字段可能存在的不統一問題。

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

下面的所有代碼全部寫在getTreeIds函數體內。現在，我們從config中拿到children和id字段，并分別設置一個默認值。

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

假設我們的數據結構是下面這樣的，該如何通過子節點查找父節點呢?我們都知道，父子節點的關聯是通過children字段建立的。可惜這個關聯是單向的，我們只能通過父節點查找子節點，而不能通過子節點查找父節點，因為我們的子節點缺少對父節點的引用。

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

我們需要編寫一個函數手動將子節點與父節點建立綁定。最簡單的查找方式就是將樹形結構轉化為扁平化數組，并建立關聯，然后再進行查找。

toFlatArray函數的源碼如下，我們使用數組的reduce方法對樹形結構數組進行聚合遞歸轉化為扁平化的樹，將parentId字段添加到子節點，這樣我們就建立了子節點到父節點的關聯。

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

然后，我們創建getIds函數，該函數接收一個扁平化的樹，使用while循環進行查找，如果存在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]

童鞋們，學會了嗎?是不是很簡單?