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 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
实现高性能javascript的注意事项
May 27 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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
Laravel实现用户注册和登录
2015/01/23 PHP
php上传文件常见问题总结
2015/02/03 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php生出随机字符串
2017/07/06 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
js精度溢出解决方案
2012/12/02 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
Python Requests安装与简单运用
2016/04/07 Python
Python实现带百分比的进度条
2016/06/28 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
绿色环保标语
2014/06/12 职场文书
党委班子对照检查材料
2014/08/19 职场文书