Maison >interface Web >js tutoriel >Partage par JavaScript d'algorithmes de parcours récursif et de parcours non récursif pour les arbres multiples

Partage par JavaScript d'algorithmes de parcours récursif et de parcours non récursif pour les arbres multiples

小云云original: 2018-05-16 16:42:362698parcourir

Cet article présente principalement les algorithmes de parcours récursif et non récursif des multi-arbres en JavaScript. Il analyse également en détail les techniques de parcours récursif et non récursif des multi-arbres JavaScript pour les nœuds json sous forme d'exemples. Les amis qui en ont besoin peuvent le faire. Pour référence, j'espère que cela pourra aider tout le monde.

Préparation avant présentation

Structure du fichier du projet démo :

index.html
jsonData.js
recurrenceTree.js
noRecurrenceTree.js

Expliquez chaque fichier :

index.html est le code HTML utilisé pour le document de démonstration.
jsonData.js stocke les données JSON du multi-arbre.
L'algorithme récursif recurrenceTree.js parcourt l'arbre.
Algorithme non récursif noRecurrenceTree.js pour la traversée d'arbres.

jsonData.js

/**
 * 用于演示的 JSON 树形数据结构
 */
var root = {
  name:&#39;D盘&#39;,
  children:[
    {
      name:&#39;学习&#39;,
      children:[
        {
          name:&#39;电子书&#39;,
          children:[
            {
              name:&#39;文学&#39;,
              children:[
                {
                  name:&#39;茶馆&#39;
                },
                {
                 name:&#39;红与黑&#39;
                }
              ]
            }
          ]
        }
      ]
    },
    {
      name:&#39;电影&#39;,
      children:[
        {
          name:&#39;美国电影&#39;
        },
        {
          name:&#39;日本电影&#39;
        }
      ]
    }
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
  <meta http-equiv="Cache-Control" content="max-age: 31536000">
  <title>www.jb51.net js多叉树遍历</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="wap-font-scale" content="no">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <script type="text/javascript" src="jsonData.js"></script>
 </head>
 <body>
  递归遍历：<span id="app"></span>
  <script type="text/javascript" src="recurrenceTree.js"></script>
  <hr>
  非递归遍历：<span id="app2"></span>
  <script type="text/javascript" src="noRecurrenceTree.js"></script>
 </body>
</html>

Parcours récursif

recurrenceTree.js

// 遍历单个节点
function traverseNode(node){
  var pObj = document.getElementById("app");
  pObj.innerHTML = pObj.innerHTML + " " + node.name;
}
// 递归遍历树
// 作者：张超
function traverseTree(node){
  if (!node) {
    return;
  }
  traverseNode(node);
  if (node.children && node.children.length > 0) {
    var i = 0;
    for (i = 0; i < node.children.length; i++) {
      this.traverseTree(node.children[i]);
    }
  }
}
traverseTree(root);

Parcours non récursif

noRecurrenceTree.js

// 遍历单个节点
function traverseNode2(node){
  var pObj2 = document.getElementById("app2");
  pObj2.innerHTML = pObj2.innerHTML + " " + node.name;
}
// 非递归遍历树
// 作者：张超
function traverseTree2(node){
  if (!node) {
    return;
  }
  var stack = [];
  stack.push(node);
  var tmpNode;
  while (stack.length > 0) {
    tmpNode = stack.pop();
    traverseNode2(tmpNode);
    if (tmpNode.children && tmpNode.children.length > 0) {
      var i = tmpNode.children.length - 1;
      for (i = tmpNode.children.length - 1; i >= 0; i--) {
        stack.push(tmpNode.children[i]);
      }
    }
  }
}
traverseTree2(root);

Effet de test natif :

Recommandations associées :

Partage d'exemples de code pour la traversée non récursive d'arbres binaires

PHP utilise le parcours récursif pour implémenter les fichiers dans le dossier spécifié

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：Explication détaillée du rendu côté serveur Nuxt.js VueArticle suivant：Explication détaillée du rendu côté serveur Nuxt.js Vue

Articles Liés

Voir plus