JavaScript實作二元樹的先序、中序及後序遍歷方法
本文主要介紹了JavaScript實作二元樹的先序、中序及後序遍歷方法,結合實例形式總結分析了javascript二元樹的先序、中序及後序遍歷實現方法與相關操作注意事項,需要的朋友可以參考下，希望能幫助大家。
本文實例講述了JavaScript實作二元樹的先序、中序及後序遍歷方法。分享給大家供大家參考，具體如下：
之前學資料結構的時候，學了二元樹的先序、中序、後序遍歷的方法，並用C語言實現了，下文是用js實現二元樹的3種遍歷，並以動畫的形式展現遍歷的過程。
整個遍歷過程還是採用遞歸的思想，原理很粗暴也很簡單
先序遍歷的函數：
function preOrder(node){
if(!(node==null)){
pList.push(node);
preOrder(node.firstElementChild);
preOrder(node.lastElementChild);
}
}中序遍歷的函數：
function inOrder(node) {
if (!(node == null)) {
inOrder(node.firstElementChild);
pList.push(node);
inOrder(node.lastElementChild);
}
}後序遍歷的函數：
function postOrder(node) {
if (!(node == null)) {
postOrder(node.firstElementChild);
postOrder(node.lastElementChild);
pList.push(node);
}
}顏色變化函數：
function changeColor(){
var i=0;
pList[i].style.backgroundColor = 'blue';
timer=setInterval(function(argument){
i++;
if(i<pList.length){
pList[i-1].style.backgroundColor="#fff";
pList[i].style.backgroundColor="blue";
}
else{
pList[pList.length-1].style.backgroundColor="#fff";
}
},500)
}核心程式碼如上，本來想寫深度優先遍歷和廣度優先遍歷。後來發現二元樹深度優先遍歷和先序遍歷相同。改日總結樹的BFS和DFS。
全部程式碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.root{
display: flex;
padding: 20px;
width: 1000px;
height: 300px;border: 1px solid #000000;
margin: 100px auto;
margin-bottom: 10px;
justify-content: space-between;
}
.child_1{
display: flex;
padding: 20px;
width: 450px;
height: 260px;border: 1px solid red;
justify-content: space-between;
}
.child_2{
display: flex;
padding: 20px;
width: 170px;
height: 220px;border: 1px solid green;
justify-content: space-between;
}
.child_3{
display: flex;
padding: 20px;
width: 35px;
height: 180px;border: 1px solid blue;
justify-content: space-between;
}
input{
margin-left: 100px;
width: 60px;
height: 40px;
font:20px italic;
}
</style>
</head>
<body>
<p class="root">
<p class="child_1">
<p class="child_2">
<p class="child_3"></p>
<p class="child_3"></p>
</p>
<p class="child_2">
<p class="child_3"></p>
<p class="child_3"></p>
</p>
</p>
<p class="child_1">
<p class="child_2">
<p class="child_3"></p>
<p class="child_3"></p>
</p>
<p class="child_2">
<p class="child_3"></p>
<p class="child_3"></p>
</p>
</p>
</p>
<input type="button" value="先序">
<input type="button" value="中序">
<input type="button" value="后序">
<script type="text/javascript" src="遍历.js"></script>
</body>
</html>js:
/**
* Created by hp on 2016/12/22.
*/
var btn = document.getElementsByTagName('input'),
preBtn = btn[0],
inBtn = btn[1],
postBtn = btn[2],
treeRoot = document.getElementsByClassName('root')[0],
pList = [],
timer = null;
window.onload=function(){
preBtn.onclick = function () {
reset();
preOrder(treeRoot);
changeColor();
}
inBtn.onclick = function () {
reset();
inOrder(treeRoot);
changeColor();
}
postBtn.onclick = function () {
reset();
postOrder(treeRoot);
changeColor();
}
}
/*先序遍历*/
function preOrder(node){
if(!(node==null)){
pList.push(node);
preOrder(node.firstElementChild);
preOrder(node.lastElementChild);
}
}
/*中序遍历*/
function inOrder(node) {
if (!(node == null)) {
inOrder(node.firstElementChild);
pList.push(node);
inOrder(node.lastElementChild);
}
}
/*后序遍历*/
function postOrder(node) {
if (!(node == null)) {
postOrder(node.firstElementChild);
postOrder(node.lastElementChild);
pList.push(node);
}
}
/*颜色变化函数*/
function changeColor(){
var i=0;
pList[i].style.backgroundColor = 'blue';
timer=setInterval(function(argument){
i++;
if(i<pList.length){
pList[i-1].style.backgroundColor="#fff";
pList[i].style.backgroundColor="blue";
}
else{
pList[pList.length-1].style.backgroundColor="#fff";
}
},500)
}
function reset(){
pList=[];
clearInterval(timer);
var ps=document.getElementsByTagName("p");
for(var i=0;i登入後複製 由此可見，二叉樹的遍歷思想是一樣的。之前一直把JS看做是寫各種特效的語言，現在向來是too naive了。
相關推薦：
以上是JavaScript實作二元樹的先序、中序及後序遍歷方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
微信刪除的人如何找回（簡單教學告訴你如何恢復被刪除的聯絡人）
May 01, 2024 pm 12:01 PM
而後悔莫及、人們常常會因為一些原因不小心刪除某些聯絡人、微信作為一款廣泛使用的社群軟體。幫助用戶解決這個問題，本文將介紹如何透過簡單的方法找回被刪除的聯絡人。 1.了解微信聯絡人刪除機制這為我們找回被刪除的聯絡人提供了可能性、微信中的聯絡人刪除機制是將其從通訊錄中移除，但並未完全刪除。 2.使用微信內建「通訊錄恢復」功能微信提供了「通訊錄恢復」節省時間和精力，使用者可以透過此功能快速找回先前刪除的聯絡人，功能。 3.進入微信設定頁面點選右下角，開啟微信應用程式「我」再點選右上角設定圖示、進入設定頁面，，
怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程
Mar 28, 2024 pm 12:50 PM
番茄小說是一款非常熱門的小說閱讀軟體，我們在番茄小說中經常會有新的小說和漫畫可以去閱讀，每一本小說和漫畫都很有意思，很多小伙伴也想著要去寫小說來賺取賺取零用錢，在把自己想要寫的小說內容編輯成文字，那麼我們要怎麼樣在這裡面去寫小說呢?小伙伴們都不知道，那就讓我們一起到本站本站中花點時間來看寫小說的方法介紹。分享番茄小說寫小說方法教學 1、先在手機上打開番茄免費小說app，點擊個人中心——作家中心 2、跳到番茄作家助手頁面——點擊創建新書在小說的結
七彩虹主機板怎麼進入bios？教你兩種方法
Mar 13, 2024 pm 06:01 PM
七彩虹主機板在中國國內市場享有較高的知名度和市場佔有率，但是有些七彩虹主機板的用戶還不清楚怎麼進入bios進行設定呢？針對這一情況，小編專門為大家帶來了兩種進入七彩虹主機板bios的方法，快來試試吧！方法一：使用u盤啟動快捷鍵直接進入u盤裝系統七彩虹主機板一鍵啟動u盤的快捷鍵是ESC或F11，首先使用黑鯊裝機大師製作一個黑鯊U盤啟動盤，然後開啟電腦，當看到開機畫面的時候，連續按下鍵盤上的ESC或F11鍵以後將會進入到一個啟動項順序選擇的窗口，將遊標移到顯示“USB”的地方，然
手機版龍蛋孵化方法大揭密（一步一步教你如何成功孵化手機版龍蛋）
May 04, 2024 pm 06:01 PM
手機遊戲成為了人們生活中不可或缺的一部分，隨著科技的發展。它以其可愛的龍蛋形象和有趣的孵化過程吸引了眾多玩家的關注，而其中一款備受矚目的遊戲就是手機版龍蛋。幫助玩家們在遊戲中更好地培養和成長自己的小龍，本文將向大家介紹手機版龍蛋的孵化方法。 1.選擇合適的龍蛋種類玩家需要仔細選擇自己喜歡並且適合自己的龍蛋種類，根據遊戲中提供的不同種類的龍蛋屬性和能力。 2.提升孵化機的等級玩家需要透過完成任務和收集道具來提升孵化機的等級，孵化機的等級決定了孵化速度和孵化成功率。 3.收集孵化所需的資源玩家需要在遊戲中
手機字體大小設定方法（輕鬆調整手機字體大小）
May 07, 2024 pm 03:34 PM
字體大小的設定成為了重要的個人化需求，隨著手機成為人們日常生活的重要工具。以滿足不同使用者的需求、本文將介紹如何透過簡單的操作，提升手機使用體驗，調整手機字體大小。為什麼需要調整手機字體大小-調整字體大小可以使文字更清晰易讀-適合不同年齡段用戶的閱讀需求-方便視力不佳的用戶使用手機系統自帶字體大小設置功能-如何進入系統設置界面-在在設定介面中找到並進入"顯示"選項-找到"字體大小"選項並進行調整第三方應用調整字體大小-下載並安裝支援字體大小調整的應用程式-開啟應用程式並進入相關設定介面-根據個人
Win11管理員權限取得方法總計
Mar 09, 2024 am 08:45 AM
Win11管理員權限取得方法匯總在Windows11作業系統中，管理員權限是非常重要的權限之一，可以讓使用者對系統進行各種操作。有時候，我們可能需要取得管理員權限來完成一些操作，例如安裝軟體、修改系統設定等。下面就為大家總結了一些取得Win11管理員權限的方法，希望能幫助大家。 1.使用快捷鍵在Windows11系統中，可以透過快捷鍵的方式快速開啟命令提
Oracle版本查詢方法詳解
Mar 07, 2024 pm 09:21 PM
Oracle版本查詢方法詳解Oracle是目前世界上最受歡迎的關聯式資料庫管理系統之一，它提供了豐富的功能和強大的效能，廣泛應用於企業。在進行資料庫管理和開發過程中，了解Oracle資料庫的版本是非常重要的。本文將詳細介紹如何查詢Oracle資料庫的版本信息，並給出具體的程式碼範例。查詢資料庫版本的SQL語句在Oracle資料庫中，可以透過執行簡單的SQL語句
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
