樹的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生成樹結構
// 生成樹結構
function tree(list) {
const result = [];
for (let value of list) {
// 排除空字元串的情況
if (!value) {
continue;
}
const values = value.split('/');
// 查找樹結構的當前級別是否已經存在,不存在則創建對象,並添加入列表。
let current = result.find(item => item.name === values[0]);
if (current === void 0) {
current = {};
result.push(current);
}
for (let i = 0, length = values.length; i < length; i++) {
current.name = values[i];
if (i < length - 1) {
// 如果還有下一級內容,判斷當前是否有 children,沒有則構建.
if (current.children === void 0) {
current.children = [];
}
// 查找下一級對象,為下一遍遍歷構建對象
let nextCurrent = current.children.find(item => item.name === values[i + 1]);
if (nextCurrent === void 0) {
nextCurrent = {};
current.children.push(nextCurrent);
}
current = nextCurrent;
}
}
}
return result;
}
============ 假裝分割線 ===========
以上代碼是生成樹的函數,調用 tree 函數並傳入你的 input 數據,返回值就是生成的樹。網路沒找到傳代碼的地方了。
Ⅲ 如何用js實現簡單的樹控制項
我之前寫過一個,很簡單,也就下面幾個函數:
function topOfList()
{
var btn = document.getElementById('topOfListBtn');
if(btn.state == 'spaned')
{
var forms = document.getElementsByTagName('form');
var timeSpan = 50;
for(var i = 0;i<forms.length;i++)
{
var form = forms[i];
if(form.id.indexOf('Top') > -1)
{
ShinkSlowly(form,timeSpan);
timeSpan += 50;
}
}
btn.state = 'unspaned';
changeBtnImg('topOfListImg','img/unspaned.jpg');
tellConsoleSpanSate();
}
else
{
var forms = document.getElementsByTagName('form');
var timeSpan = 50;
for(var i = 0;i<forms.length;i++)
{
var form = forms[i];
if(form.id.indexOf('Top') > -1)
{
SpanSlowly(form,timeSpan);
timeSpan += 50;
}
}
btn.state = 'spaned';
changeBtnImg('topOfListImg','img/spaned.jpg');
tellConsoleSpanSate();
}
}
function bottomOfList()
{
var btn = document.getElementById('bottomOfListBtn');
if(btn.state == 'spaned')
{
var forms = document.getElementsByTagName('form');
var timeSpan = 50;
for(var i = 0;i<forms.length;i++)
{
var form = forms[i];
if(form.id.indexOf('Bottom') > -1)
{
ShinkSlowly(form,timeSpan);
timeSpan += 50;
}
}
btn.state = 'unspaned';
changeBtnImg('bottomOfListImg','img/unspaned.jpg');
tellConsoleSpanSate();
}
else
{
var forms = document.getElementsByTagName('form');
var timeSpan = 50;
for(var i = 0;i<forms.length;i++)
{
var form = forms[i];
if(form.id.indexOf('Bottom') > -1)
{
SpanSlowly(form,timeSpan);
timeSpan += 50;
}
}
btn.state = 'spaned';
changeBtnImg('bottomOfListImg','img/spaned.jpg');
tellConsoleSpanSate();
}
}
function ShinkSlowly(form,timeSpan)//控制按鈕收縮的函數
{
setTimeout(function()
{
form.style.display = 'none';
}
,timeSpan);
}
function SpanSlowly(form,timeSpan)//控制按鈕展開的函數
{
setTimeout(function()
{
form.style.display = '';//alert(form.id);
}
,timeSpan);
}
function changeBtnImg(imgId, imgSrc)
{
document.getElementById(imgId).src=imgSrc;//'img/unspaned.jpg';'img/spaned.jpg';
}
其中,imgSrc要換成你硬碟里存在的圖片路徑。然後在你的+號圖片的單擊事件響應使用topOfList()函數即可,我測試過,可用。ShinkSlowly()函數內部可以控制張開和收縮的速度。