溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript怎么實(shí)現(xiàn)多叉樹的遞歸遍歷和非遞歸遍歷算法

發(fā)布時間：2021-04-13 11:23:49 來源：億速云 閱讀：292 作者：小新 欄目：web開發(fā)

小編給大家分享一下JavaScript怎么實(shí)現(xiàn)多叉樹的遞歸遍歷和非遞歸遍歷算法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

具體如下：

演示之前的準(zhǔn)備工作

演示項(xiàng)目的文件結(jié)構(gòu)：

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

解釋一下各個文件：

index.html 是用來演示的 HTML 文件。
jsonData.js 里面存儲著多叉樹的JSON數(shù)據(jù)。
recurrenceTree.js 遞歸算法遍歷樹。
noRecurrenceTree.js 非遞歸算法遍歷樹。

jsonData.js

/**
 * 用于演示的 JSON 樹形數(shù)據(jù)結(jié)構(gòu)
 */
var root = {
  name:'D盤',
  children:[
    {
      name:'學(xué)習(xí)',
      children:[
        {
          name:'電子書',
          children:[
            {
              name:'文學(xué)',
              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>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>

遞歸遍歷

recurrenceTree.js

// 遍歷單個節(jié)點(diǎn)
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

// 遍歷單個節(jié)點(diǎn)
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);

本機(jī)測試效果：

JavaScript怎么實(shí)現(xiàn)多叉樹的遞歸遍歷和非遞歸遍歷算法

看完了這篇文章，相信你對“JavaScript怎么實(shí)現(xiàn)多叉樹的遞歸遍歷和非遞歸遍歷算法”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手