JavaScript's sharing of recursive traversal and non-recursive traversal algorithms for multi-trees-JS Tutorial-php.cn

JavaScript's sharing of recursive traversal and non-recursive traversal algorithms for multi-trees

小云云

Release： 2018-05-16 16:42:36

Original

2681 people have browsed it

This article mainly introduces the recursive traversal and non-recursive traversal algorithms of multi-trees implemented in JavaScript. It also analyzes in detail the recursive and non-recursive traversal techniques of JavaScript multi-trees for json nodes in the form of examples. Friends who need it can For reference, I hope it can help everyone.

Preparation work before the demonstration

File structure of the demonstration project:

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

Explain each file:

index.html is the HTML used for demonstration document.
jsonData.js stores the JSON data of multi-tree.
recurrenceTree.js Recursive algorithm traverses the tree.
noRecurrenceTree.js Non-recursive algorithm for tree traversal.

jsonData.js

/**
 * 用于演示的 JSON 树形数据结构
 */
var root = {
  name:&#39;D盘&#39;,
  children:[
    {
      name:&#39;学习&#39;,
      children:[
        {
          name:&#39;电子书&#39;,
          children:[
            {
              name:&#39;文学&#39;,
              children:[
                {
                  name:&#39;茶馆&#39;
                },
                {
                 name:&#39;红与黑&#39;
                }
              ]
            }
          ]
        }
      ]
    },
    {
      name:&#39;电影&#39;,
      children:[
        {
          name:&#39;美国电影&#39;
        },
        {
          name:&#39;日本电影&#39;
        }
      ]
    }
  ]
}

Copy after login

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>www.jb51.net 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>

Copy after login

Recursive traversal

recurrenceTree.js

// 遍历单个节点
function traverseNode(node){
  var pObj = document.getElementById("app");
  pObj.innerHTML = pObj.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);

Copy after login

Non-recursive traversal

##noRecurrenceTree.js

// 遍历单个节点
function traverseNode2(node){
  var pObj2 = document.getElementById("app2");
  pObj2.innerHTML = pObj2.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);

Copy after login

Native test effect:

Related recommendations:

About non-recursive traversal example code sharing of binary trees

php uses recursive traversal to specify a folder File implementation method within the specified folder

PHP recursively traverses the file implementation method within the specified folder

The above is the detailed content of JavaScript's sharing of recursive traversal and non-recursive traversal algorithms for multi-trees. For more information, please follow other related articles on the PHP Chinese website!