javascript實(shí)現(xiàn)二叉樹(shù)遍歷的代碼
前言:
緊接著上篇 二叉樹(shù)的javascript實(shí)現(xiàn) ,來(lái)說(shuō)一下二叉樹(shù)的遍歷。
本次一本正經(jīng)的胡說(shuō)八道,以以下這個(gè)二叉樹(shù)為例子進(jìn)行遍歷:

接著是要引入二叉樹(shù)實(shí)現(xiàn)的代碼:
function Node(data, left, right) {
this.data = data;
this.left = left;
this.right = right;
this.show = show;
}
function show() {
return this.data;
}
function BST() {
this.root = null;
this.insert = insert;
}
function insert(data) {
var n = new Node(data, null, null);
if (this.root == null) {
this.root = n;
}
else {
var current = this.root;
var parent;
while (true) {
parent = current;
if (data < current.data) {
current = current.left;
if (current == null) {
parent.left = n;
break;
}
}
else {
current = current.right;
if (current == null) {
parent.right = n;
break;
}
}
}
}
}
二叉樹(shù)遍歷的分類
二叉樹(shù)的遍歷分為先序、中序、后序遍歷。這里說(shuō)到的先序、中序、后序是相對(duì)于父節(jié)點(diǎn)來(lái)說(shuō)。父節(jié)點(diǎn)的值先輸出就是先序,三者間它在中間輸出就是中序,最后輸出就是后序。至于那個(gè)是父節(jié)點(diǎn)是相對(duì)而言的,因?yàn)槌巳~子節(jié)點(diǎn)(最底下一層節(jié)點(diǎn)),其他每個(gè)節(jié)點(diǎn)都可以是父節(jié)點(diǎn)。

先序遍歷
先序遍歷就是,先打印父節(jié)點(diǎn),然后是左子節(jié)點(diǎn)(左子樹(shù)),然后再打印右子節(jié)點(diǎn)(子樹(shù))。
function preOrder(node) {
if (!(node == null)) {
console.log(node.show() + " ");
preOrder(node.left);
preOrder(node.right);
}
}
// 給BST類添加先序遍歷的成員方法
function BST() {
this.root = null;
this.insert = insert;
this.preOrder = preOrder;
}
preOrder函數(shù)是遞歸實(shí)現(xiàn)的,應(yīng)該說(shuō)二叉樹(shù)的遍歷都是遞歸實(shí)現(xiàn)的。可能有些人會(huì)因?yàn)橄刃虮闅v的特征:“先打印父節(jié)點(diǎn),然后是左子節(jié)點(diǎn)(左子樹(shù)),然后再打印右子節(jié)點(diǎn)(子樹(shù))” 而陷入一個(gè)錯(cuò)誤的想法,這想法是什么請(qǐng)看下圖:

注意紅框部分,父節(jié)點(diǎn)是10,左子節(jié)點(diǎn)是3,右子節(jié)點(diǎn)是18,因?yàn)樯厦娴慕Y(jié)論,可能會(huì)錯(cuò)誤地認(rèn)為打印的順序是10 → 3 → 18,然而事實(shí)并非如此[捂臉],真是的順序是:先打印10,然后是打印左子樹(shù),打印完左子樹(shù)的全部節(jié)點(diǎn)后,才開(kāi)始打印以10位父節(jié)點(diǎn)的右子樹(shù):

這個(gè)時(shí)候,你的腦海就該這樣想:

然后是這樣想:

如此類推打印完以10為父節(jié)點(diǎn)的左子樹(shù),然后也是以這樣的方式打印以10為父節(jié)點(diǎn)的右子樹(shù),按著這種 拆分代替的思想 來(lái)理解會(huì)更好明白二叉樹(shù)的遍歷。
然后最終,先序遍歷改二叉樹(shù)的順序是:

按圖的輸出順序是:10 -> 3 -> 2 -> 4 -> 9 -> 8 -> 9 -> 18 -> 13 -> 21
最后來(lái)實(shí)踐一下,先序遍歷:
var bst = new BST();
var nums = [10, 3, 18, 2, 4, 13, 21, 9, 8, 9];
for(var i = 0; i < nums.length; i++) {
bst.insert(nums[i]);
}
bst.preOrder(bst.root);

這里強(qiáng)調(diào)一下,輸出順序和插入順序有關(guān)的,因?yàn)槟悴迦腠樞虿煌傻亩鏄?shù)也是不同的。有疑問(wèn)的可以去 二叉樹(shù)的javascript實(shí)現(xiàn) 細(xì)看一下,有比較明白的說(shuō)明了二叉樹(shù),也可以實(shí)驗(yàn)一下:

中序遍歷
看完先序遍歷,已經(jīng)可以類推到很多和中序、后序遍歷相關(guān)的知識(shí)點(diǎn)。中序遍歷的特征是:先打印左子樹(shù)(左子節(jié)點(diǎn)),接著打印父節(jié)點(diǎn),最后打印右子樹(shù)(右子節(jié)點(diǎn))。
function inOrder(node) {
if (!(node == null)) {
inOrder(node.left);
console.log(node.show() + " ");
inOrder(node.right);
}
}
// 給BST類添加該成員方法
function BST() {
this.root = null;
this.insert = insert;
this.preOrder = preOrder;
this.inOrder = inOrder;
}
中序遍歷的打印順序:

按上圖的輸出順序是:2 -> 3 -> 4 -> 8 -> 9 -> 9 -> 10 -> 13 -> 18 -> 21
接著是,實(shí)踐一下中序遍歷:

后序遍歷
function postOrder(node) {
if (!(node == null)) {
postOrder(node.left);
postOrder(node.right);
console.log(node.show() + " ");
}
}
// 給BST類添加該成員方法
function BST() {
this.root = null;
this.insert = insert;
this.preOrder = preOrder;
this.inOrder = inOrder;
this.postOrder = postOrder;
}
后序遍歷的打印順序

按上圖的輸出順序是:2 -> 8 -> 9 -> 9 -> 4 -> 3 -> 13 -> 21 -> 18 -> 10

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用VsCode編輯TypeScript的實(shí)現(xiàn)方法
這篇文章主要介紹了用VsCode編輯TypeScript的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JavaScript 大數(shù)據(jù)相加的問(wèn)題
寫(xiě)一個(gè)函數(shù)處理大數(shù)據(jù)的相加問(wèn)題,所謂的大數(shù)據(jù)是指超出了整型,長(zhǎng)整型之類的常規(guī)數(shù)據(jù)類型表示范圍的數(shù)據(jù)。實(shí)現(xiàn)語(yǔ)言不限。2011-08-08
JavaScript實(shí)現(xiàn)輪播圖方法(邏輯清晰一看就懂)
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)輪播圖方法的相關(guān)資料,JS輪播圖的實(shí)現(xiàn)核心是使用JavaScript來(lái)控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設(shè)置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下2023-12-12
側(cè)欄跟隨滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼
側(cè)欄里的有些內(nèi)容滾動(dòng)到頁(yè)面頂端以后就固定在那個(gè)位置,不再跟隨滾動(dòng)條而滾動(dòng),想必很多站長(zhǎng)朋友都想實(shí)現(xiàn)這個(gè)效果吧,接下來(lái)為大家詳細(xì)介紹下,感興趣的你可不要錯(cuò)過(guò)了哈2013-03-03
JavaScript canvas實(shí)現(xiàn)文字時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)文字時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01

