二叉樹遍歷，寬度優先 （js實現）

二叉樹從左到右，按層遍歷就是二叉樹的寬度遍歷

---

如下的二叉樹圖：

因爲我是前端開發，所用語言是js，同時網頁的dom節點正好是樹形存儲結構。因此我用js來實現。
實現目標：

 

1. 遍歷二叉樹所有節點
2. 分別打印各個樹的id，分別是1，2，3，4，5，6，7，8，同時打印id所屬的樹的層級。

div樹結構如下，完成上訴要求：

<div data-id=1 id="domparent">
	<div data-id="2">
		<div data-id="4"></div>
	</div>
	<div data-id="3">
		<div data-id="5">
			<div data-id="7"></div>
			<div data-id="8"></div>
		</div>
		<div data-id="6">
			
		</div>
	</div>
</div>

js代碼
設計思想：
其實這個東西的難點是如和打印出樹的層數，其實遍歷所有的子節點還是挺簡單的

1. 設計一個函數接受一個二叉樹的根節點（或者父節點）爲參數
2. 首先初始化數據，因爲根節點或父節點，都是獨佔一層而且，遍歷到根節點和父節點是要立馬換行的，因此數據初始化爲：temparr=[傳入的根節點（父節點）]，last=< 傳入的根節點（父節點） >、nlast=< 傳入的根節點（父節點） >，c=1;
3. last這個變量是當前遍歷的最右節點，nlast是表示下一行的最右節點。其實這個算法的思想就是，現將根節點或父節點，放進一個數組，彈出的節點先打印出來，然後將彈出節點所有的子節點加入到一個這個數組當中，當彈出的這個節點等於了last就表示此層級遍歷完成，進入下一層級，層級加一，nlast就指向這個新加入這個數組當中的節點，當前遍歷的彈出的節點等於一直到最後這個數組爲空數組，這樣就證明所有的樹節點遍歷完成。

// js算法設計
let domparents = document.getElementById('domparent')
function BreadthTraversal(domparent){
	let temparr = [domparent],last=domparent,nlast=domparent,popchild;c=1;
	while(temparr.length){
		popchild = temparr.shift()//彈出節點
		console.log(popchild.dataset.id,last.dataset.id,c);
		if(popchild == last){
			c++
		}
		for(let i = 0;i<popchild.children.length;i++){
			temparr.push(popchild.children[i]);
			nlast = popchild.children[i];
		}
		if(popchild==last){
			last = nlast;
		}
	}
}
BreadthTraversal(domparents)