Home >Web Front-end >JS Tutorial >JavaScript implements pre-order, in-order and post-order traversal methods of binary trees

JavaScript implements pre-order, in-order and post-order traversal methods of binary trees

小云云Original: 2018-01-02 13:17:592113browse

This article mainly introduces the JavaScript implementation of pre-order, in-order and post-order traversal methods of binary trees. It summarizes and analyzes the implementation methods of pre-order, in-order and post-order traversal of binary trees in JavaScript and related operation precautions in the form of examples. What is needed Friends can refer to it, I hope it can help everyone.

The example of this article describes the JavaScript implementation of pre-order, in-order and post-order traversal methods of binary trees. I share it with you for your reference. The details are as follows:

When I was learning data structure before, I learned the pre-order, in-order and post-order traversal methods of binary trees and implemented them in C language. The following is implemented in js Three types of traversal of binary trees, and the traversal process is shown in the form of animation.

The entire traversal process still uses recursive thinking. The principle is very crude and simple.

Function of pre-order traversal:

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

中Function of in-order traversal:

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

Function of post-order traversal:

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

Color change function:

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

The core code is as above. I originally wanted to write depth-first traversal and breadth-first traversal. Later it was discovered that depth-first traversal of a binary tree is the same as pre-order traversal. I will summarize the BFS and DFS of trees another day.

The entire code is as follows:

<!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>
<p class="root">
  <p class="child_1">
    <p class="child_2">
      <p class="child_3"></p>
      <p class="child_3"></p>
    </p>
    <p class="child_2">
      <p class="child_3"></p>
      <p class="child_3"></p>
    </p>
  </p>
  <p class="child_1">
    <p class="child_2">
      <p class="child_3"></p>
      <p class="child_3"></p>
    </p>
    <p class="child_2">
      <p class="child_3"></p>
      <p class="child_3"></p>
    </p>
  </p>
</p>
<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],
  pList = [],
  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)){
    pList.push(node);
    preOrder(node.firstElementChild);
    preOrder(node.lastElementChild);
  }
}
/*中序遍历*/
function inOrder(node) {
  if (!(node == null)) {
    inOrder(node.firstElementChild);
    pList.push(node);
    inOrder(node.lastElementChild);
  }
}
/*后序遍历*/
function postOrder(node) {
  if (!(node == null)) {
    postOrder(node.firstElementChild);
    postOrder(node.lastElementChild);
    pList.push(node);
  }
}
/*颜色变化函数*/
function changeColor(){
  var i=0;
  pList[i].style.backgroundColor = &#39;blue&#39;;
  timer=setInterval(function(argument){
    i++;
    if(i<pList.length){
      pList[i-1].style.backgroundColor="#fff";
      pList[i].style.backgroundColor="blue";
    }
    else{
      pList[pList.length-1].style.backgroundColor="#fff";
    }
  },500)
}
function reset(){
  pList=[];
  clearInterval(timer);
  var ps=document.getElementsByTagName("p");
  for(var i=0;iIt can be seen that the binary tree Traversing thoughts is the same. I used to regard JS as a language for writing various special effects, but now it has always been too naive. 
Related recommendations: 
Detailed explanation of the definition method of complete binary tree in php
Implementation method of Java minimum binary tree heap sorting 
JS implementation of data structure: tree and binary tree, binary tree traversal and basic operation methods
The above is the detailed content of JavaScript implements pre-order, in-order and post-order traversal methods of binary trees. For more information, please follow other related articles on the PHP Chinese website!

Java php c语言 JavaScript 递归数据结构堆 JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to calculate sliding distance using touch event on JS mobile phoneNext article：How to calculate sliding distance using touch event on JS mobile phone

See more

JavaScript implements pre-order, in-order and post-order traversal methods of binary trees

Related articles