Javascript多叉樹的遞歸遍歷

背景

遍歷樹形結構的菜單，實現子菜單的添加與刪除。
菜單的樹形結構：

要實現的功能：

1. 添加子菜單
   獲取到的數據有：整個菜單樹形結構的數據以及目前選中的父菜單的key。
   邏輯：遍歷這棵多叉樹，找到父結點，拼接好子結點的信息，再push到父結點的children中。
2. 刪除子菜單
   獲取到的數據有：整個菜單樹形結構的數據以及目前選中的菜單的key。
   邏輯：遍歷這棵多叉樹，找到選中菜單的父結點，再遍歷父結點的子結點找到選中的結點，利用splice刪除選中結點。

實現方法

這兩種功能都須要遍歷多叉樹。
這就涉及到你們不肯去觸碰的多叉樹遍歷了....剛開始是循環套循環套循環....看得本身都昏了。
後來鼓起勇氣從新來過。

遞歸遍歷多叉樹

百度百科對遞歸的定義是：程序調用自身的編程技巧稱爲遞歸（ recursion）。
而我對遞歸的理解就是把大問題切分紅一個一個小問題。也就是不斷縮小參數範圍。
我在寫遞歸函數的時候是分了三步。

• 第一步 明確函數功能
  固然，在背景中已說明。遍歷多叉樹，找到父結點，拼接好子結點的信息，再push到父結點的children中。
• 第二步 找到遞歸出口
  第一個出口是，節點爲空;
  第二個出口是找到父結點執行完相應操做;
• 第三步 縮小參數範圍
  當父結點存在子節點時，又向下遍歷子節點。

具體代碼

export const addMenu = (node, fatherKey, newDirectoryTitle) => {
  if (!node) {
    return;
  }
  if(node.key === fatherKey) {
    const child = {
      type: `${node.key}-${node.childType}`,
      title: newDirectoryTitle,
      key: `${node.key}-${node.childType}`,
      childType: 0,
      children:[],
    }
    node.childType += 1;
    node.children.push(child);
    return;
  }
  if(node.children && node.children.length > 0) {
    for(let i =0 ;i < node.children.length; i++) {
      addMenu(node.children[i],fatherKey,newDirectoryTitle);
    }
  }
};

刪除子菜單的方法其實也是差很少。只是其中的處理邏輯不同。
回頭再看看以前寫的多叉樹遍歷，其實並不難，只是本身原來對它有了慣性的抗拒。