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 相关文章推荐
js TextArea的选中区域处理
Dec 28 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
react 生命周期实例分析
May 18 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
在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
PHP实现的简单组词算法示例
2018/04/10 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
党校培训思想汇报
2013/12/30 职场文书
教师节促销活动方案
2014/02/14 职场文书
陈欧的广告词
2014/03/18 职场文书
工作岗位说明书模板
2014/05/09 职场文书
活动总结格式
2014/08/30 职场文书
2014年社区工作总结
2014/11/18 职场文书
毕业生党员个人总结
2015/02/14 职场文书
教师自荐信范文
2015/03/06 职场文书
英雄儿女观后感
2015/06/09 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android