關於javascript實現遍歷樹的信息

本文目錄一覽：

• 1、JavaScript，關於樹形結構數據遍歷
• 2、js,樹形數組 遍歷獲取某個節點，跪求大神
• 3、JS樹結構數據的遍歷
• 4、js, 遍歷樹形數組 根據id獲取單個
• 5、js廣度遍歷生成樹,樹的定義
• 6、js中在dom原型鏈編寫一個可以遍歷節點樹的方法怎麼寫呢？

JavaScript，關於樹形結構數據遍歷

var arr=[];

var fun = function(arr, key){

var result = [];

for(var i=0;iarr.length;i++) result.push(arr[i][key]);

return result;

}

//diaoyong

var result = fun(arr,”treeId”);

console.log(result);

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

這就是最基礎的遍歷

var GetByID = function(Data,ID)

{

var Deep,T,F;

for (F = Data.length;F;)

{

T = Data[–F]

if (ID === T.id) return T

if (T.children)

{

Deep = GetByID(T.children,ID)

if (Deep) return Deep

}

}

}

GetByID(a,’2016′)

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, 遍歷樹形數組 根據id獲取單個

//傳入要查找的數據集，目標id，返回目標ID對應的數據集合

//jsonData:數據集

//destID:目標ID

//json:目標ID結果集

function GetSubJson(jsonData, destID, json) {

for (var i = 0; i jsonData.length; i++) {

if (jsonData[i].id == destID)

json.push(jsonData[i]);

else {

if (jsonData[i].hasOwnProperty(“children”)) {

GetSubJson(jsonData[i].children, destID, json);

}

}

}

}

//例如

var json = [];

GetSubJson(a, “2016”, json);

js廣度遍歷生成樹,樹的定義

先序，後序，中序針對二叉樹。

深度、廣度針對普通樹。深度遍歷：從樹根開始掃描，頂層掃描完了，從一層最左（也可以右）面的結點往下層掃描，直到下層已無結點，這時所有靠最左（右）的結點全部掃描完畢，從樹梢往上退一層，看這層旁有無兄弟結點，有的話還是一樣從最左（右）邊開始掃描，這是個遞歸概念，利用這一方法來遍歷整棵樹。廣度遍歷：從樹根開始掃描，頂層掃描完了，掃描一層的所有結點，掃描二層的所有結點，，掃描最底層的結點。

js中在dom原型鏈編寫一個可以遍歷節點樹的方法怎麼寫呢？

DOM(即 Document Object Mode) 是 W3C（萬維網聯盟）的標準。

DOM 定義了訪問 HTML 和 XML 文檔的標準：「W3C 文檔對象模型 （DOM） 是中立於平台和語言的介面，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。」

W3C DOM 標準被分為 3 個不同的部分：

核心 DOM – 針對任何結構化文檔的標準模型

XML DOM – 針對 XML 文檔的標準模型

HTML DOM – 針對 HTML 文檔的標準模型