使用javascript實現排序二叉樹（2）

susheng 發布于2019-08-23 11:33 / 2427人閱讀

摘要：使用實現排序二叉樹上一篇文章我們構造了基本的一個排序二叉樹的數據結構，但是僅僅是定義了一個方法去創建二叉排序樹，今天我們來給我們的數據結構添加一些遍歷的功能。

使用javascript實現排序二叉樹（2）

上一篇文章我們構造了基本的一個排序二叉樹的數據結構，但是僅僅是定義了一個insert方法去創建二叉排序樹，今天我們來給我們的數據結構添加一些遍歷的功能。

二叉樹的三種遍歷方式（以根節點為準來定義前、中、后）的介紹及其應用場景：

前序遍歷

順序：根節點 => 左子樹 => 右子樹

應用：可以用來構建文件的目錄結構，輸出所有目錄并分層

中序遍歷

順序：左子樹 => 根節點 => 右子樹

應用：可以進行排序，輸出的結果是一個遞增的序列

后續遍歷

順序：左子樹 => 右子樹 => 根節點

應用：后續遍歷是先遍歷子樹，最后到根節點，可以實現統計節點數、計算文件夾大小的功能

思考：

遍歷的方法是給誰用的，是否需要暴露出去

如果暴露出去，怎樣設計才能讓調用者能夠獲取到每一個節點并且進行對應的操作

結論：

肯定是要暴露出去給別人調用的

給別人調用，具體的邏輯是不確定的，所以應該是調用者傳入一個函數，我們在遍歷的時候把每一次的節點都傳給這個函數，并且去調用這個函數，這樣我們不用管具體函數的邏輯，反正已經把它想要的節點給他了，具體怎樣操作我們不用管。

分析完畢之后，依然是上次的代碼，我們給他添加前序中序和后續遍歷的方法：

function BinaryTree(){
  var root = null; //根節點默認為null
  //節點類型的構造函數
  function Node(key){
    this.key = key;
    this.left = null;
    this.right = null;
  }
  //插入方法
  this.insert = function(key){     
    var newNode = new Node(key);
    if(root === null){
       root = newNode;
    }else{
       insertNode(root,newNode)
    }
  }
  var insertNode = function(node,newNode){
    if(newNode.key < node.key){
      if(node.left === null){
         node.left = newNode;
      }else{
         insertNode(node.left,newNode)
      }
    }else{
      if(newNode.key > node.key){
        if(node.right === null){
          node.right = newNode;
        }else{
          insertNode(node.right,newNode)
        }
      }
    }
  }
  
  /*--------------------------------------------------------*/
  /*
      前序遍歷： 根節點 => 左子樹 => 右子樹
  */
  this.preTravel = function(callback){
    //和上面插入操作類似，都用一個內部的函數來實現具體的邏輯，因為需要使用root
     preTravelNode(root,callback); 
  }   
  /* 
      邏輯：
          1. 判斷傳入的節點是否為null，如果為null就直接return
          2. 如果不為null，則繼續對該節點下的left和right進行遞歸調用
          3. 具體的調用順序根據為 根節點 => 左子樹 => 右子樹
  */
  function preTravelNode(node,callback){
    if(node !== null){ 
       callback(node.key); 
       preTravelNode(node.left,callback);
       preTravelNode(node.right,callback);
    }
  }
  
  //中序遍歷
  this.middleTravel = function(callback){
    middleTravelNode(root,callback);
  }
  function middleTravelNode(node,callback){
    if(node !== null){
       middleTravelNode(node.left,callback);
       callback(node.key);
       middleTravelNode(node.right,callback);
    }
  }
  
  //后續遍歷
  this.nextTravel = function(callback){
    nextTravelNode(root,callback);
  }
  function nextTravelNode(node,callback){
    if(node !== null){
       nextTravelNode(node.left,callback);
       nextTravelNode(node.right,callback);
       callback(node.key);
    }
  }
}

var nodes = [8,7,3,4,6,5,2,9,12]
var binaryTree = new BinaryTree();
nodes.forEach((item)=>{
    binaryTree.insert(item)
})
//測試前序遍歷
binaryTree.beforeTravel((key)=>{
  console.log(key) // 8,7,3,2,4,6,5,9,10
})
console.log("--------------------")
//中序遍歷
binaryTree.middleTravel((key)=>{
  console.log(key) // 2,3,4,5,6,7,8,9,10
})
console.log("--------------------")
//后續遍歷
binaryTree.nextTravel((key)=>{
  console.log(key) // 2,5,6,4,3,7,10,9,8
})

具體的邏輯 ：

判斷傳入的節點是否為null，如果為null就直接return

如果不為null，則繼續對該節點下的left和right進行遞歸調用

具體的調用順序根據前序、中序、后序、的訪問節點順序去修改調用的順序

還是放上這個二叉樹的圖，根據圖去對比測試的遍歷結果更直觀：

重點：

怎樣設計遍歷方法，調用者傳什么東西進來，我們要暴露什么東西出去，這個地方得想明白

下期內容 ：

實現二叉樹的節點查找功能

實現二叉樹中節點的刪除功能

實現一個二叉樹的一個小游戲

上期內容 ：

使用javascript定義一個排序二叉樹

云服務器 GPU云服務器二叉樹排序樹規則實現二叉樹二叉樹 python二叉樹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97120.html

使用javascript實現排序二叉樹（1）

摘要：使用實現排序二叉樹排序二叉樹的定義二叉樹的基礎上，左節點比父節點要小，右節點比父節點要大的二叉樹，叫排序二叉樹。下期內容實現排序二叉樹的中序前序后續遍歷實現二叉樹的節點查找功能實現排序二叉樹的刪除節點功能應用排序二叉樹實現一個小游戲使用javascript實現排序二叉樹（1）排序二叉樹的定義：二叉樹的基礎上，左節點比父節點要小，右節點比父節點要大的二叉樹，叫排序二叉樹。 show...

Caicloud 2019-08-23 11:29 評論0 收藏0
JavaScript 數據結構與算法之美 - 非線性表中的樹、堆是干嘛用的？其數據結構是怎樣的？

摘要：筆者寫的數據結構與算法之美系列用的語言是，旨在入門數據結構與算法和方便以后復習。非線性表中的樹堆是干嘛用的其數據結構是怎樣的希望大家帶著這兩個問題閱讀下文。其中，前中后序，表示的是節點與它的左右子樹節點遍歷訪問的先后順序。 showImg(https://segmentfault.com/img/bVbuvnj?w=900&h=250); 1. 前言想學好前端，先練好內功，內功不行，...

singerye 2019-08-26 10:09 評論0 收藏0
學習javascript數據結構(四)——樹

摘要：原文博客地址學習數據結構四樹知乎專欄簡書專題前端進擊者知乎前端進擊者簡書博主博客地址的個人博客人之所能，不能兼備，棄其所短，取其所長。通常子樹被稱作左子樹和右子樹。敬請期待數據結構篇最后一篇文章學習數據結構五圖參考文章樹數據結構二叉樹前言總括：本文講解了數據結構中的[樹]的概念，盡可能通俗易懂的解釋樹這種數據結構的概念，使用javascript實現了樹，如有紕漏，歡迎批評指正。 ...

Dean 2019-08-20 13:47 評論0 收藏0
數據結構與算法:二叉樹算法

摘要：因此，根據題目給出的先序遍歷和中序遍歷，可以畫出二叉樹選參考數據結構與算法描述實現二叉樹算法淺談數據結構二叉樹慕課網實現二叉樹算法前端樹控件騰訊軟件開發面試題內容銜接上一章數據結構與算法:常見排序算法內容提要什么是樹　　- 為什么使用樹二叉樹二叉查找樹紅黑樹Ｂ、Ｂ＋樹堆伸展樹樹可以點擊鏈接感受下筆者用d3.js畫的tree https://codepen...

Little_XM 2019-08-22 11:09 評論0 收藏0
JavaScript實現簡單二叉查找樹

摘要：二叉查找樹二叉查找樹也叫二叉搜索樹它只允許我們在左節點存儲比父節點更小的值，右節點存儲比父節點更大的值，上圖展示的就是一顆二叉查找樹。前兩天接到了螞蟻金服的面試電話，面試官很直接，上來就拋出了三道算法題。。。其中有一道關于二叉樹實現中序遍歷的，當時沒回答好，所以特意學習了一把二叉樹的知識，行文記錄總結。二叉樹&二叉查找樹 showImg(https://segmentfault....

frank_fun 2019-08-23 10:38 評論0 收藏0