Méthode de mise en œuvre de la traversée pré-commande, dans l'ordre et post-commande de l'arbre binaire JS-js tutoriel-php.cn

Méthode de mise en œuvre de la traversée pré-commande, dans l'ordre et post-commande de l'arbre binaire JS

php中世界最好的语言

Libérer： 2018-04-16 15:23:30

original

2105 Les gens l'ont consulté

Cette fois, je vais vous présenter la méthode d'implémentation de parcours pré-commande, dans l'ordre et post-commande de l'arbre binaire JS Quelles sont les précautions pour implémenter la méthode de pré-commande. Parcours ordonné, dans l'ordre et post-ordre de l'arbre binaire JS ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Quand j'apprenais la structure des données auparavant, j'ai appris les méthodes de parcours pré-ordre, dans l'ordre et post-ordre des arbres binaires, et je les ai implémentées en langage C. Ce qui suit est l'implémentation de trois parcours. d'arbres binaires utilisant js, et un formulaire animé montre le processus de traversée.

L'ensemble du processus de traversée utilise toujours la pensée récursive, et le principe est très grossier et simple

Fonction de parcours des précommandes :

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

Copier après la connexion

Fonction de parcours dans l'ordre :

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

Copier après la connexion

Fonction de parcours de post-commande :

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

Copier après la connexion

Fonction changement de couleur :

function changeColor(){
  var i=0;
  pList[i].style.backgroundColor = 'blue';
  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)
}

Copier après la connexion

Le code de base est comme ci-dessus. Je voulais à l'origine écrire un parcours en profondeur et en largeur. Plus tard, il a été découvert que le parcours en profondeur d'abord d'un arbre binaire est identique au parcours de pré-ordre. Je résumerai le BFS et le DFS des arbres un autre jour.

Tous les codes sont les suivants :

<!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>

Copier après la connexion

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 = 'blue';
  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;i<ps.length;i++){
    ps[i].style.backgroundColor="#fff";
  }
}

Copier après la connexion

On voit que l’idée de parcourir un arbre binaire est la même. Avant, je considérais JS comme un langage permettant d'écrire divers effets spéciaux, mais maintenant, il a toujours été trop naïf.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment obtenir la longueur de la distance de glissement de l'événement tactile

JS+H5+C3 à mettre en œuvre fenêtre pop-up

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!