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


Posted in Javascript onFebruary 08, 2018

本文实例讲述了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>3water.com 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 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 #Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 #Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 #Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
AnglarJs中的上拉加载实现代码
Feb 08 #Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 #Javascript
You might like
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
vue实现购物车小案例
2019/09/27 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
单身联谊活动方案
2014/01/29 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
单位工作证明范文
2014/09/14 职场文书
离婚代理词范文
2015/05/23 职场文书
大学新生入学感想
2015/08/07 职场文书
2015团员个人年度总结
2015/11/24 职场文书