我們在實際的工作業務場景中經常遇到這樣的場景，求取樹資料中某個節點的父親節點以及所有的父親節點，這樣的場景下不建議使用深度遍歷，使用廣度遍歷可以更快找到。

1、案例解說

比如樹的長相是這樣的：

樹的資料是這樣的：

是我們常用的樹的資料及長相。

2、業務要求

在【測試抽取5】後面新增一個節點，要求
1）介面要求傳入當前節點的父節點；
2）新增後重新獲取樹資料，預設展開所有的父級

3、程式碼實現及說明

思路：
1）設定一個排隊陣列parentIdsQueue將樹資料開始排隊；
2）如果當前資料有孩子節點，將孩子節點倒序加入佇列中，因為遍歷的時候是從第一個資料開始的；
3）如果當前資料有孩子節點，在孩子加入佇列前，把父親節點的資料放到parentArr

中；
4）如果找到了節點，如果是第一層的節點，直接獲取即可；如果包括parentArr，則parentArr中的全是它的父級節點

多說無益，先上實現程式碼

// id 指的是當前點選的節點id;
findParentNode (id) {
      // 初始化所需資料
      this.firstParentObj = {}; // 記錄直系父級的名稱和id即介面要傳的資料
      this.parentIds = []; // 記錄所有的父級ids
      this.parentIdsQueue = []; // 記錄排隊的
       
      // 將樹放到排隊系列
      this.parentIdsQueue = this.treeData;

      // 開始遍歷排隊的樹
      while (this.parentIdsQueue.length) {
        let item = this.parentIdsQueue.shift();

        let { children } = item;
        if (item.id === id) {
          this.parentIds = [];
          // 第一層就找到了
          if (!item.parentArr) {
            this.firstParentObj = {
              id: item.id,
              name: item.title
            };
            this.parentIds = [item.id];
          } else {
            // 獲取當前節點的parentArr
            let len = item.parentArr.length;
            this.firstParentObj = item.parentArr[len - 1];
            item.parentArr.forEach(a => {
              this.parentIds.push(a.id);
            });

            this.parentIds.push(item.id);
          }

          // 結束遍歷
          this.parentIdsQueue = [];
          break;
        } else if (children && children.length) {
          let len = children.length;
          for (let i = len - 1; i >= 0; i--) {
            // 記錄它的父親節點
            children[i].parentArr = [];

            // 把它的歷史父親節點們先放入
            if (item.parentArr) {
              children[i].parentArr = children[i].parentArr.concat(
                item.parentArr
              );
            }
            
            // 再放入當前的父親節點
            children[i].parentArr.push({
              id: item.id,
              name: item.title
            });
            this.parentIdsQueue.unshift(children[i]);
          }
        }
      }
    }
 

5、結果演示

我們在文前舉的例子中添加個節點，我們打印出所需的資料

     console.log("測試抽取5的所有父親",item.parentArr);
     console.log("介面所需的父親節點資料",this.firstParentObj);
     console.log("設定樹展開所需的所有父親節點資料節點id", this.parentIds);

相關推薦