導航:首頁 > 編程語言 > js遍歷樹節點

js遍歷樹節點

發布時間:2023-05-14 15:59:28

js樹形結構如何從最深層往上匹配

一、樹結構

定義一顆樹,JS中常見的樹形數據結構如下,children屬性對應的是子樹

let tree = [
{
id: '1',
name: '節點1',
children: [
{
id: '1-1',
name: '節點1-1'
}
]
},
{
id: '2',
name: '節點2',
children: [
{
id: '2-1',
name: '節點2-1'
},
{
id: '2-2',
name: '節點2-2',
children: [
{
id: '2-2-1',
name: '節點2-2-1'
}
]
}
]
},
{
id: '3',
name: '節點3'
}
]
二、深度優先遍歷(DFS)

1、遞歸實現

function treeIterator(tree, func) {
tree.forEach((node) => {
func(node)
node.children && treeIterator(node.children, func)
})
}
實現邏輯簡述:定義treeIterator函數,傳入tree(樹)和func(回調函數)兩個參數,遍歷tree數組,執行回調函數,如果當前節點存在children,則遞歸調用。

函數調用驗證:調用treeIterator函數,傳入上文定義好的樹結構數組,列印出每個節點的name值。

treeIterator(tree, (node) => {
console.log(node.name)
})
控制台列印結果如下:

2、循環實現

function treeIterator(tree, func) {
let node, curTree = [...tree]
while ((node = curTree.shift())) {
func(node)
node.children && curTree.unshift(...node.children)
}
}
實現邏輯簡述:

(1)定義node作為當前節點,curTree為傳入的樹(不影響原數組tree);

(2)執行while循環,curTree數組第一個元素從其中刪除,並返回第一個元素賦值給node;

(3)①執行回調函數;②如果當前節點存在子樹,則追加到curTree數組的開頭,繼續執行循環,直到curTree沒有元素為止。

函數調用驗證:參考上述遞歸實現驗證,方式和結果一致。

三、廣度優先遍歷(BFS)

function treeIterator(tree, func) {
let node, curTree = [...tree]
while ((node = curTree.shift())) {
func(node)
node.children && curTree.push(...node.children)
}
}
實現邏輯簡述:和上述深度優先遍歷的循環實現差不多。區別在於如果當前節點存在子樹,則追加到list數組的末尾。

② 求最簡單的方法進行原生js 循環遍歷樹(json數據)

遞歸吧般樹都遞歸

③ js的樹形結構怎麼實現

這個問題,我建議你去下載下樹形菜單。網上已經實現的js很多,下載下來一看就明白了,

④ JS樹結構數據的遍歷

title: JS樹結構數據的遍歷
date: 2022-04-14
description: 針對項目中出現樹形結構數據的時候,我們怎樣去操作他

項目中我們會經常出現對樹形結構的遍歷、查找和轉換的場景,比如說DOM樹、族譜、社會機構、組織架構、許可權、菜單、省市區、路由、標簽等等。那針對這些場景和數據,我們又如何去遍歷和操作,有什麼方式或者技巧可以簡化我們的實現思路。下面我們將針對常規出現的場景去總結一下我們的遍歷方式

樹的特點
1、每個節點都只有有限個子節點或無子節點;
2、沒有父節點的節點稱為根節點;
3、每一個非根節點有且只有一個父節點;
4、除了根節點外,每個子節點可以分為多個不相交的子樹;
5、樹裡面沒有環路

下面的圖片表示一顆樹

在下面的JS中我們由多棵樹組成我們的數據

在這數據中我們如何評判數據是否為葉節點(也就是最後一級),我們每個節點都會存在children屬性,如果不存在children屬性或者children不是一個數組或者children為數組且長度為0我們則認為他是一個葉節點

我們針對樹結構的操作離不開遍歷,遍歷的話又分為廣度優先遍歷、深度優先遍歷。其中深度優先遍歷可以通過遞歸和循環的方式實現,而廣度優先遍歷的話是非遞歸的

從上往下對每一層依次訪問,在每一層中,從左往右(也可以從右往左)訪問結點,訪問完一層就進入下一層,直到沒有結點可以訪問為止。即訪問樹結構的第n+1層前必須先訪問完第n層。

簡單的說,BFS是從根節點開始,沿著樹的寬度遍歷樹的節點。如果所有節點均被訪問,則演算法中止。

所以我們的實現思路是,維護一個隊列,隊列的初始值為樹結構根節點組成的列表,重復執行以下步驟直到隊列為空:
取出隊列中的第一個元素,進行訪問相關操作,然後將其後代元素(如果有)全部追加到隊列最後。

深度優先搜索演算法(英語:Depth-First-Search,DFS)是一種用於遍歷或搜索樹或圖的演算法。這個演算法會盡可能深的搜索樹的分支。當節點v的所在邊都己被探尋過,搜索將回溯到發現節點v的那條邊的起始節點。這一過程一直進行到已發現從源節點可達的所有節點為止。如果還存在未被發現的節點,則選擇其中一個作為源節點並重復以上過程,整個進程反復進行直到所有節點都被訪問為止

1、先序遍歷
訪問子樹的時候,先訪問根再訪問根的子樹

2、後序遍歷
訪問子樹的時候,先訪問子樹再訪問根

1、先序遍歷
先序遍歷與廣度優先循環實現類似,要維護一個隊列,不同的是子節點不追加到隊列最後,而是加到隊列最前面

2、後序遍歷
後序遍歷就略微復雜一點,我們需要不斷將子樹擴展到根節點前面去,執行列表遍歷,並且通過一個臨時對象維護一個id列表,當遍歷到某個節點如羨大果它沒有子節點或者它本身已經存在於我們的臨時id列表,則執行訪問操笑高作,否則繼續擴展子節點到當前節點前面

對於樹結構的遍歷操作,其實遞歸是最基礎,也是最容易理解的。遞歸本身就是循環的思想,所以可以用循環來改寫遞碰派尺歸,以上的方式在項目中已經廊括了大部分的場景了,我們在日常開發中可以根據場景或者需要去選擇我們的遍歷方式,或者基於此對他進行調整和優化,至於每種方式的空間復雜度和時間復雜度我們在這個地方就不去嘗試了,各位感興趣可以自己去驗證。

廣度優先搜索

樹的遍歷

深度優先搜索

圖文詳解兩種演算法:深度優先遍歷(DFS)和廣度優先遍歷(BFS)

二叉樹遍歷(前序,後序,中序,層次)遞歸與迭代實現JavaScript

JS樹結構操作:查找、遍歷、篩選、樹和列表相互轉換

⑤ js,樹形數組 遍歷獲取某個節點,跪求大神

這就是最基礎的遍歷

varGetByID=function(Data,ID)
{
varDeep,T,F;
for(F=Data.length;F;)
{
T=Data[--F]
if(ID===T.id)returnT
if(T.children)
{
Deep=GetByID(T.children,ID)
if(Deep)returnDeep
}
}
}

GetByID(a,'2016')

⑥ JS中的二叉樹遍歷

棧、隊列、鏈表等數據結構,都是順序數據結構。而樹是非順序數據結構。樹型結構是一類非常重要的非線性結構。直觀地,樹型結構是以分支關系定義的層次結構。

二叉樹(Binary Tree)是另一種樹型結構,它的特點是每個結點至多隻有兩棵子樹(即二叉樹中不存在度大於2的結點),並且,二叉樹的子樹有左右之分(其次序不能任意顛倒。)

遍歷二叉樹(Traversing Binary Tree):是指按指定的規律對二叉樹中的每個結點訪問一次且僅訪問一次。

二叉樹有深度遍歷和廣度遍歷, 深度遍歷有前序、 中序和後序三種遍歷方法。二叉樹的前序遍歷可以用來襲告顯示目錄結構等;中序遍歷可以實現表達式樹,在編譯器擾禪鏈底層很有用;後序遍歷可以用來實現計算目錄內的文件及其信息等。

上述二叉樹(a+b*c)-d/e在js中可以用對象的形式表示出來:

先遞歸遍歷左子樹,從最左的一個左子樹存入數組;然後回溯遍歷雙親結點,再是右子樹,這樣遞歸循環。

將當前結點壓入棧,然後將左子樹當做當前結點,如果當前結點為空,將雙親結點取出來,將值保存進數組,然後將右子樹當做當前結點,進行循環。

先走左子樹,緩孫當左子樹沒有孩子結點時,將此結點的值放入數組中,然後回溯遍歷雙親結點的右結點,遞歸遍歷。

廣度優先遍歷二叉樹(層序遍歷)是用隊列來實現的,廣度遍歷是從二叉樹的根結點開始,自上而下逐層遍歷;在同一層中,按照從左到右的順序對結點逐一訪問。

js 中二叉樹的深度遍歷與廣度遍歷(遞歸實現與非遞歸實現)
二叉樹與JavaScript

閱讀全文

與js遍歷樹節點相關的資料

熱點內容
zycommentjs 瀏覽:414
確認全血細胞減少看哪些數據 瀏覽:265
文件有哪些要求 瀏覽:484
cad打開時會出現兩個文件 瀏覽:65
什麼是轉基因網站 瀏覽:48
手柄設備有問題代碼43 瀏覽:921
怎麼他么怎麼又網路了 瀏覽:649
java會出現內存泄露么 瀏覽:617
蘋果4s鎖屏後怎麼還顯示歌曲 瀏覽:207
鴻蒙系統文件管理哪些可以刪除 瀏覽:550
ubuntuqt創建工程沒有配置文件 瀏覽:126
網站登錄變成其他網站怎麼處理 瀏覽:202
ug數控編程學校有哪些 瀏覽:203
java圖片上傳顯示 瀏覽:402
ppt的文件名後綴 瀏覽:902
ug編程軟體下載到哪個盤 瀏覽:359
炫酷字體APP下載的文件在哪裡 瀏覽:668
廊坊哪裡有少兒編程機構 瀏覽:312
cad新文件能找回來嗎 瀏覽:951
導出手機qq文件到u盤 瀏覽:456

友情鏈接