JavaScript實現二叉樹的先序、中序及后序遍歷方法詳解

來源：懂視網責編：小采時間：2020-11-27 22:27:04

JavaScript實現二叉樹的先序、中序及后序遍歷方法詳解

JavaScript實現二叉樹的先序、中序及后序遍歷方法詳解:本文實例講述了JavaScript實現二叉樹的先序、中序及后序遍歷方法。分享給大家供大家參考，具體如下：之前學數據結構的時候，學了二叉樹的先序、中序、后序遍歷的方法，并用C語言實現了，下文是用js實現二叉樹的3種遍歷，并以動畫的形式展現出遍歷的過程。

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript實現二叉樹的先序、中序及后序遍歷方法詳解:本文實例講述了JavaScript實現二叉樹的先序、中序及后序遍歷方法。分享給大家供大家參考，具體如下：之前學數據結構的時候，學了二叉樹的先序、中序、后序遍歷的方法，并用C語言實現了，下文是用js實現二叉樹的3種遍歷，并以動畫的形式展現出遍歷的過程。

本文實例講述了JavaScript實現二叉樹的先序、中序及后序遍歷方法。分享給大家供大家參考，具體如下：

之前學數據結構的時候，學了二叉樹的先序、中序、后序遍歷的方法，并用C語言實現了，下文是用js實現二叉樹的3種遍歷，并以動畫的形式展現出遍歷的過程。

整個遍歷過程還是采用遞歸的思想，原理很粗暴也很簡單

先序遍歷的函數：

function preOrder(node){
 if(!(node==null)){
 divList.push(node);
 preOrder(node.firstElementChild);
 preOrder(node.lastElementChild);
 }
}

中序遍歷的函數：

function inOrder(node) {
 if (!(node == null)) {
 inOrder(node.firstElementChild);
 divList.push(node);
 inOrder(node.lastElementChild);
 }
}

后序遍歷的函數：

function postOrder(node) {
 if (!(node == null)) {
 postOrder(node.firstElementChild);
 postOrder(node.lastElementChild);
 divList.push(node);
 }
}

顏色變化函數：

function changeColor(){
 var i=0;
 divList[i].style.backgroundColor = 'blue';
 timer=setInterval(function(argument){
 i++;
 if(i<divList.length){
 divList[i-1].style.backgroundColor="#fff";
 divList[i].style.backgroundColor="blue";
 }
 else{
 divList[divList.length-1].style.backgroundColor="#fff";
 }
 },500)
}

核心代碼如上，本來想寫深度優先遍歷和廣度優先遍歷。后來發現二叉樹深度優先遍歷和先序遍歷相同。改日總結一下樹的BFS和DFS。

全部代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .root{
 display: flex;
 padding: 20px;
 width: 1000px;
 height: 300px;border: 1px solid #000000;
 margin: 100px auto;
 margin-bottom: 10px;
 justify-content: space-between;
 }
 .child_1{
 display: flex;
 padding: 20px;
 width: 450px;
 height: 260px;border: 1px solid red;
 justify-content: space-between;
 }
 .child_2{
 display: flex;
 padding: 20px;
 width: 170px;
 height: 220px;border: 1px solid green;
 justify-content: space-between;
 }
 .child_3{
 display: flex;
 padding: 20px;
 width: 35px;
 height: 180px;border: 1px solid blue;
 justify-content: space-between;
 }
 input{
 margin-left: 100px;
 width: 60px;
 height: 40px;
 font:20px italic;
 }
 </style>
</head>
<body>
<div class="root">
 <div class="child_1">
 <div class="child_2">
 <div class="child_3"></div>
 <div class="child_3"></div>
 </div>
 <div class="child_2">
 <div class="child_3"></div>
 <div class="child_3"></div>
 </div>
 </div>
 <div class="child_1">
 <div class="child_2">
 <div class="child_3"></div>
 <div class="child_3"></div>
 </div>
 <div class="child_2">
 <div class="child_3"></div>
 <div class="child_3"></div>
 </div>
 </div>
</div>
<input type="button" value="先序">
<input type="button" value="中序">
<input type="button" value="后序">
<script type="text/javascript" src="遍歷.js"></script>
</body>
</html>

js:

/**
 * Created by hp on 2016/12/22.
 */
var btn = document.getElementsByTagName('input'),
 preBtn = btn[0],
 inBtn = btn[1],
 postBtn = btn[2],
 treeRoot = document.getElementsByClassName('root')[0],
 divList = [],
 timer = null;
window.onload=function(){
 preBtn.onclick = function () {
 reset();
 preOrder(treeRoot);
 changeColor();
 }
 inBtn.onclick = function () {
 reset();
 inOrder(treeRoot);
 changeColor();
 }
 postBtn.onclick = function () {
 reset();
 postOrder(treeRoot);
 changeColor();
 }
}
/*先序遍歷*/
function preOrder(node){
 if(!(node==null)){
 divList.push(node);
 preOrder(node.firstElementChild);
 preOrder(node.lastElementChild);
 }
}
/*中序遍歷*/
function inOrder(node) {
 if (!(node == null)) {
 inOrder(node.firstElementChild);
 divList.push(node);
 inOrder(node.lastElementChild);
 }
}
/*后序遍歷*/
function postOrder(node) {
 if (!(node == null)) {
 postOrder(node.firstElementChild);
 postOrder(node.lastElementChild);
 divList.push(node);
 }
}
/*顏色變化函數*/
function changeColor(){
 var i=0;
 divList[i].style.backgroundColor = 'blue';
 timer=setInterval(function(argument){
 i++;
 if(i<divList.length){
 divList[i-1].style.backgroundColor="#fff";
 divList[i].style.backgroundColor="blue";
 }
 else{
 divList[divList.length-1].style.backgroundColor="#fff";
 }
 },500)
}
function reset(){
 divList=[];
 clearInterval(timer);
 var divs=document.getElementsByTagName("div");
 for(var i=0;i<divs.length;i++){
 divs[i].style.backgroundColor="#fff";
 }
}

由此可見，二叉樹的遍歷思想是一樣的。之前一直把JS看做是寫各種特效的語言，現在向來是too naive了。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數據結構與算法技巧總結》、《JavaScript數算用法總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com