JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例-偶像资源网

本文实例讲述了JavaScript实现多叉树的递归遍历和非递归遍历算法操作。分享给大家供大家参考，具体如下：

演示之前的准备工作

演示项目的文件结构：

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

解释一下各个文件：

index.html 是用来演示的 HTML 文件。
jsonData.js 里面存储着多叉树的JSON数据。
recurrenceTree.js 递归算法遍历树。
noRecurrenceTree.js 非递归算法遍历树。

jsonData.js

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

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.freexyz.cn 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>

递归遍历

recurrenceTree.js

// 遍历单个节点
function traverseNode(node){
  var divObj = document.getElementById(\"app\");
  divObj.innerHTML = divObj.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);

非递归遍历

noRecurrenceTree.js

// 遍历单个节点
function traverseNode2(node){
  var divObj2 = document.getElementById(\"app2\");
  divObj2.innerHTML = divObj2.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);

本机测试效果：

JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例

请登录后发表评论