二叉树遍历，宽度优先 （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)