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 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
Vue表单实例代码
2016/09/05 Javascript
浅析vue深复制
2018/01/29 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python self,cls,decorator的理解
2009/07/13 Python
Python中encode()方法的使用简介
2015/05/18 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
学校文明单位申报材料
2014/05/06 职场文书
会员活动策划方案
2014/08/19 职场文书
作风建设剖析材料
2014/10/06 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
一文搞懂Redis中String数据类型
2022/04/03 Redis