如何用循环遍历树结构_遍历树形结构-程序员宅基地

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

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如何优雅的遍历树形数据结构_淘人居士的博客-程序员宅基地_遍历树形数据

本文链接：https://blog.csdn.net/sinat_34626741/article/details/123844488

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

基于高德地图实现完全自定义Marker_高德地图 marker 自定义-程序员宅基地

文章浏览阅读1.3w次，点赞5次，收藏11次。做地图社交类APP开发的都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式。本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多说,先来看看最终效果:实现思路: 先来看看高德官方提供的设置Marker图标的方法:我们可以看到setIcon()方法,里面的参数BitmapDescriptor就是我们最终需要的东西。那..._高德地图 marker 自定义

软件测试基础知识 —— 白盒测试-程序员宅基地

文章浏览阅读4.4k次，点赞3次，收藏32次。白盒测试：白盒测试（White Box Testing）又称结构测试、透明盒测试、逻辑驱动测试或基于代码的测试。白盒测试只测试软件产品的内部结构和处理过程，而不测试软件产品的功能，用于纠正软件系统在描述、表示和规格上的错误，是进一步测试的前提。_白盒测试

嘿牛程序员成都传智博客包装类（二）_test6–自定义字符输入流的包装类,通过这个包装类对底层字符输入流进行包装,让程-程序员宅基地

文章浏览阅读1.8k次。---------------------- android培训、java培训、期待与您交流！ ----------------------本节继续研究包装类前面说过实现字符输入流的包装类时，我们可以借助Reader和FileInputStream进行读取文件。我们继续介绍ReaderReader、InputStreamReader、FileReader三者的关系，是继承的关系。Fil_test6–自定义字符输入流的包装类,通过这个包装类对底层字符输入流进行包装,让程

文本挖掘学习笔记（一）—布尔检索_布尔检索例子-程序员宅基地

文章浏览阅读4.2k次。最近在学习文本挖掘，故而把书中关键的内容做个笔记，方便以后查阅。信息检索是从大规模非结构化数据（通常是文本）的集合（通常保存在计算机上）中找出满足用户需求的资料的（通常是文档）的过程。按照所处理的数据的规模，信息检索可以分为三个级别：第一个级别是以web搜索为代表的大规模级别；第二个级别是小规模，可以看成是与第一种规模相对的另一极端情况；_布尔检索例子

Linux源码解析-内存描述符（mm_struct）_mm_struct *mm-程序员宅基地

文章浏览阅读1.7k次。转自https://blog.csdn.net/tiankong_/article/details/756761311.简介一个进程的虚拟地址空间主要由两个数据结构来描述。一个是最高层次的：mm_struct（定义在mm_types.h中），一个是较高层次的：vm_area_structs。最高层次的mm_struct结构描述了一个进程的整个虚拟地址空间。较高层次的结构vm_area_..._mm_struct *mm

瞎想-电信IPTV如何做到真高清真4K直播_湖南电信iptv模糊-程序员宅基地

文章浏览阅读2.3w次。瞎想-电信IPTV如何做到真高清真4K直播前几天看电信IPTV，发现高清足球大镜头的时候，基本看不清球员号码，有时候球员的头都比较模糊。我真的比较纳闷，电信都开始100M宽带起步了，为什么连10M的高清频道都无法展现好呢？我觉得IPTV肯定遇到了什么带宽瓶颈，但是具体瓶颈在哪，我不好说，也说不好。突然有个想法，IPTV是否能够参考广电的架构，完成高质量的直播呢？甚至是4K直播。..._湖南电信iptv模糊

随便推点

AD器件距离过近报错 AD修改丝印的距离间距_ad中丝印间距规则怎么改-程序员宅基地

文章浏览阅读1.8w次，点赞21次，收藏80次。今天画板子遇见了一个间距报错，图片如下我当时想着，修改丝印的间距就可以了，查找了一些资料之后发现是这样修改并且我将其修改到了0但是结果还是如上图一样，报错。最后发现除此之外，我们还需要修改元件之间的电气距离修改完成之后就OK！..._ad中丝印间距规则怎么改

论文笔记-End-to-End Human Pose and Mesh Reconstruction with Transformers（使用TransFormer进行端到端的人体姿态估计和网格重建）-程序员宅基地

文章浏览阅读2.4k次，点赞3次，收藏17次。代码和预训练模型：https://github.com/microsoft/MeshTransformer摘要：文章提出MEsh TRansfOrmer（METRO）方法，用于从单个图像重建三维人体姿态和网格顶点。其中用到了注意力编码器来联合建模顶点-顶点和顶点-关节的交互，并同时输出三维关节坐标和网格顶点。介绍：复杂的关节运动和咬合带来了很多挑战。在这方面的工作分为两类①使用参数模型并学习预测形状和姿态系数（SMPL，用到了β和θ作为输入参数，其中β代表是个人体高矮胖瘦、头身比等比例的10个参数.