二叉树前序中序后序javascript_JavaScript实现二叉树的先序、中序及后序遍历方法详解...

本文实例讲述了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[i-1].style.backgroundColor="#fff";

divList[i].style.backgroundColor="blue";

}

else{

divList[divList.length-1].style.backgroundColor="#fff";

}

},500)

}

核心代码如上，本来想写深度优先遍历和广度优先遍历。后来发现二叉树深度优先遍历和先序遍历相同。改日总结一下树的BFS和DFS。

全部代码如下：

.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;

}

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.οnlοad=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[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[i].style.backgroundColor="#fff";

}

}

由此可见，二叉树的遍历思想是一样的。之前一直把JS看做是写各种特效的语言，现在向来是too naive了。

希望本文所述对大家JavaScript程序设计有所帮助。