遞歸查詢樹狀結構某個肯定的節點

遞歸

遞歸算法在平常工做中算是用的比較多的一種，好比DOM樹的遍歷，多層級樹狀結構的生成，遍歷尋找某個樹節點等

1 先來看下數據結構

var result = {
      id:0,
    name:"張飛",
      item:[
        {id:1,name:"關羽"},
        {id:2,name:"劉備",item:[
          {id:5,name:"荀彧"},
          {id:6,name:"關平"}

        ]},
        {id:3,name:"曹操"},
        {id:4,name:"貂蟬"},
      ]
}

通常狀況下後臺返回相似於如上的嵌套數據結構，或者說只獲得一部分數據，點擊某個子節點，異步加載節點，異步加載以後的數據可能以下：

var result = {
  id:0,
  name:"張飛",
  item:[
    {id:1,name:"關羽"},
    {id:2,name:"劉備",item:[
      {id:5,name:"荀彧"},
      {id:6,name:"關平"}

    ]},
    //點擊曹操這一項，加載出來劉禪和周倉，點擊周倉，又異步加載項羽和別姬
    {id:3,name:"曹操",item:[
      {id:8,name:"劉禪"},
      {id:9,name:"周倉",item:[
        {id:10,name:"項羽"},
        {id:11,name:"別姬"}
      ]}
    ]},
    {id:4,name:"貂蟬"},
  ]
}

//點擊曹操，返回以下數組
[
  {id:8,name:"劉禪"},
  {id:9,name:"周倉"}
]
//點擊周倉，返回以下數組
[
  {id:8,name:"項羽"},
  {id:9,name:"別姬"}
]

2 如何實現項目中的需求

以目前我作的一個react項目爲例：需求是

• 將相似於這樣的數據以樹狀結構展現出來
• 異步加載子節點的數據，有多是加載子節點，有多是加載同級節點
• 因此就須要定位到每次點擊的節點的位置，而後根據其餘屬性判斷如何添加節點
• 關鍵就是如何經過遞歸找到對應id的節點位置

個人實現思路就是維持一個state狀態對象，每次異步請求回來的數據，根據返回的id來判斷點擊的位置，進而將數據添加到state中對應的id位置中

3 代碼實現遞歸

var item = [result]
//設置一個全局的value，存放找到對應item的時候的引用地址
var value = null ;
//函數要有返回值，不然默認返回undefiend
function getName(item,id){
  if(!item) return null ;
  for (var i = 0 ;i<item.length;i++){
    if(item[i].id == id) {
      value = item[i]
      break ;
    };
    if(item[i].item){
      getName(item[i].item,id)
    };
  }
  return value ;
}
//能夠試着改變id看下效果，最好打下斷電，能夠更加深入的瞭解下程序運行的過程
var foundName = getName(item,7);
console.log('foundName',foundName)

若是想要更加的通用一些，能夠稍加優化一下

var item = [result]
function getName(item,id){
  let value = null ;
  let ret = recurision(item,id);
  return ret ;
  function recurision(item,id){
    if(!item) return null ;
    for (var i = 0 ;i<item.length;i++){
      if(item[i].id == id) {
        value = item[i]
        break ;
      };
      if(item[i].item){
        recurision(item[i].item,id)
      };
    }
    return value;
  }
}

var foundName = getName(item,9);
console.log('foundName',foundName)

以上代碼實現遞歸的核心思路是依靠聲明一個外部的變量，遞歸函數內部進行查找，若是找到對應的item，則將此item賦值給value,遞歸函數返回改value值；

總感受代碼還不夠簡潔，你們有好的思路歡迎隨時交流。

jimwmg@foxmail.com