The following describes how to use JavaScript to implement the first, middle, and post-order traversal of Binary Trees.

The following describes how to use JavaScript to implement the first, middle, and post-order traversal of Binary Trees.

This example describes how to implement the first, middle, and post-order traversal of Binary trees using JavaScript. We will share this with you for your reference. The details are as follows:

When studying data structures, I learned how to traverse Binary Trees in ascending, central, and descending order, and implemented them in C language. The following describes how to use js to traverse Binary Trees, the traversal process is displayed in an animation.

The whole traversal process still adopts the recursive idea. The principle is very rough and simple.

First-order traversal function:

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

The function of sequential traversal:

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

Functions in descending order:

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

Color change function:

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)}

The core code is as above. I originally wanted to write deep-first traversal and breadth-first traversal. Later, we found that the binary tree depth-first traversal is the same as the first-order traversal. In another day, We will summarize the tree's BFS and DFS.

The Code is as follows:

<! DOCTYPE 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 ();} pos TBtn. onclick = function () {reset (); postOrder (treeRoot); changeColor () ;}/ * First traverse */function preOrder (node) {if (! (Node = null) {divList. push (node); preOrder (node. firstElementChild); preOrder (node. lastElementChild) ;}}/* Central traversal */function inOrder (node) {if (! (Node = null) {inOrder (node. firstElementChild); divList. push (node); inOrder (node. lastElementChild) ;}}/* post-order traversal */function postOrder (node) {if (! (Node = null) {postOrder (node. firstElementChild); postOrder (node. lastElementChild); divList. push (node) ;}/ * color change function */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 ";}}
We can see that binary tree traversal is the same. I have always regarded JS as a language for writing various special effects, and now it has always been too naive.