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模拟弹出效果代码修正版
Aug 07 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
js实现弹框效果
Mar 24 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python去除字符串中的换行符
2017/10/11 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
简单了解django orm中介模型
2019/07/30 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
财务总经理岗位职责
2014/02/16 职场文书
文体活动总结范文
2014/05/05 职场文书
小升初自荐信范文
2015/03/05 职场文书
西游降魔篇观后感
2015/06/15 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书