欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-13 09:29:22
本文实例讲述了javascript实现多叉树的递归遍历和非递归遍历算法操作。分享给大家供大家参考,具体如下: 演示之前的准备工作 演示项目的文件结构: index.h...

本文实例讲述了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.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>

递归遍历

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程序设计有所帮助。