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

本文实例讲述了Javascript实现多叉树的递归遍历和非递归遍历算法操作。分享给大家供大家参考，具体如下：

演示之前的准备工作

演示项目的文件结构：

index.html
jsonData.js
recurrenceTree.js
noRecurrenceTree.js

解释一下各个文件：

index.html 是用来演示的 HTML 文件。
jsonData.js 里面存储着多叉树的JSON数据。
recurrenceTree.js 递归算法遍历树。
noRecurrenceTree.js 非递归算法遍历树。

jsonData.js

var root = {
  name:'D盘',
  children:[
    {
      name:'学习',
      children:[
 {
   name:'电子书',
   children:[
     {
name:'文学',
children:[
  {
    name:'茶馆'
  },
  {
   name:'红与黑'
  }
]
     }
   ]
 }
      ]
    },
    {
      name:'电影',
      children:[
 {
   name:'美国电影'
 },
 {
   name:'日本电影'
 }
      ]
    }
  ]
}

index.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排序算法总结》、《Javascript遍历算法与技巧总结》、《Javascript查找算法技巧总结》及《Javascript错误与调试技巧总结》

希望本文所述对大家Javascript程序设计有所帮助。