Home > Article > Web Front-end > Examples of JavaScript implementation of recursive traversal and non-recursive traversal algorithms for multi-trees

Examples of JavaScript implementation of recursive traversal and non-recursive traversal algorithms for multi-trees

韦小宝Original: 2018-02-10 10:29:561819browse

This article mainly introduces JavaScript to implement the recursive traversal and non-recursive traversal algorithms of multi-trees, and analyzes in detail the recursive and non-recursive traversal related operations of JavaScript multi-trees for json nodes in the form of examples. Tips, friends who are interested in JavaScript can refer to

This article describes the example of JavaScript implementing recursive traversal and non-recursive traversal algorithm operations of multi-trees. Share it with everyone for your reference, the details are as follows:

Preparation work before demonstration

Demo project File structure:

index.html

jsonData.js
recurrenceTree.js
noRecurrenceTree.js

Explain each file:

index.html is the HTML file used for demonstration.

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;
        }
      ]
    }
  ]
}

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.php.cn 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>

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);

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);

The above is all the content of this article, I hope it can be useful Learning JavaScript helps everyone! !

Related recommendations:

js implementation of lottery system function code sharing

This article is mainly for everyone A detailed introduction to the functions of the js lottery system on a topic about the lottery system, which has a certain reference price....

Detailed examples of ajax access in js

This article mainly Let me introduce to you the relevant information about the detailed explanation of ajax access examples in native js. I hope that through this article you can master the theory....

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of custom ajax support for cross-domain component encapsulationNext article：Detailed explanation of custom ajax support for cross-domain component encapsulation

See more

Examples of JavaScript implementation of recursive traversal and non-recursive traversal algorithms for multi-trees

Related articles