如何用循环遍历树结构

前言：作为前端，经常遇见要处理树形结构的数据（比如菜单、树形结构的人员组织），之前常规的操作就是使用递归遍历，但最近发现递归容易出现栈溢出，所以开始思考有没有其他方式来实现遍历，既能提高性能又能避免栈溢出。

1、首先写个方法生成一个简单的树结构

function createTree(deep){
	var children={};
	var tree={id:0,children};
	for(var i=1;i<=deep;i++){
		children.id=i;
		children.children={}
		children=children.children;
	}
	return tree;
}

2、测试递归的效率

function recursive(node){
	var result=[node.id];
	if(node.children&&node.children.id){
		result=result.concat(recursive(node.children));
	}
	return result;
}
var tree=createTree(7000);
// console.time、console.timeEnd可用于计算执行开销的方法，可替代方法console.log(new Date().getTime() - start)
console.time('digui')
console.log("输出结果",recursive(tree));
console.timeEnd('digui')

3、测试迭代，循环方式的效率，很明显效率更高

function iterat(tree){
	var result=[];
	var node=tree;
	while(node.id!=undefined){
		result.push(node.id);
		node=node.children;
	}
	return result;
}

console.time('循环')
console.log("输出结果",iterat(tree));
console.timeEnd('循环')

4、当把树结构的var tree=createTree(7000)改成var tree=createTree(10000);

递归就会报错

 遍历仍然可用

总结：对于层级结构不太深入的，可使用递归，递归结构也更方便理解，对于层级结构特别多的，建议使用迭代循环，效率更高，也可避免栈溢出。

参考资料：Javascript如何优雅的遍历树形数据结构_淘人居士的博客-CSDN博客_遍历树形数据