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

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

php中世界最好的语言original: 2018-04-16 15:23:302053parcourir

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

Fonction de parcours dans l'ordre :

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

Fonction de parcours de post-commande :

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

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

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>

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";
  }
}

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir la longueur de la distance de glissement lors d'un événement tactileArticle suivant：Comment obtenir la longueur de la distance de glissement lors d'un événement tactile

Articles Liés

Voir plus