js如何遍历二叉树？？

最新推荐文章于 2024-06-12 16:23:50 发布
最新推荐文章于 2024-06-12 16:23:50 发布
阅读量849 收藏
点赞数 1
分类专栏： javascript 文章标签： javascript 二叉树 遍历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aimmeyang/article/details/78499055
版权

1、在百度前端学院看到这一题，一年前学的数据结构，感觉忘得差不多了偷笑偷笑，然后找了一篇博客算是简单的复习下二叉树题目。

2、下面是我写的js遍历二叉树，包括前序，中序，后序三种遍历方式，也有借鉴的部分哦。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		
		/*二叉树节点基本样式*/
		
		.node_1,.node_2,.node_3,.node_4,.node_5{
			border: 2px solid #1C86EE;
			float: left;
			padding: 5px;
			margin: 5px;
			box-sizing: content-box;
			background: #FFFFFF;
			border-radius: 10px;
			color:#1C86EE ;
		}
		.node_1{
			width: 800px;
			height: 300px;
		}
		.node_2{
			width: 350px;
			height: 250px;
		}
		.node_3{
			width: 125px;
			height: 210px;
		}
		.node_4{
			width: 80px;
			height: 80px;
		}
		.node_5{
			width: 7px;
			height: 20px;
		}
	
	</style>
	<body>
		<div class="node_1">        <!--根节点 -->          
			1<div class="node_2">
				2<div class="node_3">3
				  <div class="node_4">
				     4<div class="node_5">5</div>
				     <div class="node_5">5</div>
				   </div>
				   <div class="node_4">
				     4<div class="node_5">5</div>
				     <div class="node_5">5</div>
				   </div>
				</div>
				 <div class="node_3">3
				   <div class="node_4">4
				     <div class="node_5">5</div>
				     <div class="node_5">5</div>
				   </div>
				   <div class="node_4">4
				     <div class="node_5">5</div>
				     <div class="node_5">5</div>
				   </div>
				 </div>
			</div>
			<div class="node_2">
				2<div class="node_3">3
				   <div class="node_4">4
				     <div class="node_5">5</div>
				     <div class="node_5">5</div>
				   </div>
				   <div class="node_4">4
				     <div class="node_5">5</div>
				     <div class="node_5">5</div>
				   </div>
				</div>
				 <div class="node_3">3
				    <div class="node_4">4
				     <div class="node_5">5</div>
				     <div class="node_5">5</div>
				   </div>
				   <div class="node_4">4
				     <div class="node_5">5</div>
				     <div class="node_5">5</div>
				   </div>
				 </div>
			</div>
		</div>
		<input type="button" value="前序" />  <!--触动前序排列的按钮 根左右-->
		<input type="button" value="中序" />  <!--触动中序排列的按钮 左根右-->
		<input type="button" value="后序" />  <!--触动后序排列的按钮 左右根-->
		<script type="text/javascript">
			
			var btn = document.getElementsByTagName("input"),
			    preBtn = btn[0],
			    inBtn = btn[1],
			    lastBtn = btn[2],
			    treeNodes = [], //按照遍历节点顺序记录的各个节点
			    treeRoot = document.getElementsByClassName('node_1')[0],   //获得根节点
			    timer = null; //用做清除setInterval();
			
			window.onload = function(){
				preBtn.onclick = function(){
					reset();            //重置所有节点样式，为初始状态
					preOrder(treeRoot); //前序遍历二叉树
					changeColor();      //按照遍历的顺序改变节点的颜色
				}
				inBtn.onclick = function(){
					reset();
					inOrder(treeRoot);
					changeColor();
				}
				lastBtn.onclick = function(){
					reset();
					lastOrder(treeRoot);
					changeColor();
				}
			}
			function preOrder(node){
				if(!(node == null)){
					treeNodes.push(node);      
					preOrder(node.firstElementChild);
					preOrder(node.lastElementChild);
				}
			}
			function inOrder(node){
				if(!(node == null)){
					
					inOrder(node.firstElementChild);
					treeNodes.push(node);
					inOrder(node.lastElementChild);
				}
			}
			function lastOrder(node){
				if(!(node == null)){
					
					lastOrder(node.firstElementChild);
					lastOrder(node.lastElementChild);
					treeNodes.push(node);
				}
			}
			function changeColor(){
				var i = 0;
				treeNodes[i].style.backgroundColor = "#63B8FF";    //使遍历的第一个节点改变背景颜色
				timer = setInterval(function(argument){
					i++;
					if(i < treeNodes.length){
						treeNodes[i-1].style.backgroundColor = "white";  //使上一个节点变成原始颜色
						treeNodes[i].style.backgroundColor = "#63B8FF";  //使当前节点改变背景颜色
					}else{
						
						clearInterval(timer);                            //清除clearInterval()
						treeNodes[i-1].style.backgroundColor = "white";  //因为又执行i++，所以如果改变组后一个元素颜色需要i-1
					}
				},700)
			}
			function reset(){                 //重置函数
				treeNodes = [];
				clearInterval(timer);
				var divs = document.getElementsByTagName('div');
				for (var i = 0; i < divs.length; i++) {
					divs[i].style.backgroundColor = "white";
					
				}
			}
		</script>
		
	</body>
</html>
3、我认为js遍历二叉树有两个核心，第一当然是自己要明白二叉树三种遍历规则，第二个就是是否能够理解递归函数，这两点理解了，就没什么了

Aimmeyang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现的二叉树算法完整实例
10-20
主要介绍了JS实现的二叉树算法,结合完整实例形式分析了基于JS定义、创建二叉树及常用的各种遍历、访问二叉树操作技巧,需要的朋友可以参考下
二叉树的遍历 js实现
qq_52046856的博客
04-13 1463
二叉树主要有两种遍历方式：一是深度优先遍历，即先往二叉树底部走，遇到叶子节点再返回；二是广度优先遍历，即对二叉树的每一层逐层遍历节点。
JavaScript算法 — 二叉树遍历
小绵杨
11-11 2910
和前序遍历思想相反。先序是使用push往res数组后面加数据，二后序是使用unshift往数组前面加数据。先序：“中 - 左 - 右” 0137849256。中序：“左 - 中 - 右” 7381940526。后序：“右 - 左 - 中” 7839415620。调用递归的位置不同，结果分为三种。
js实现二叉树的遍历
最新发布
2401_85124329的博客
06-12 903
/非递归创建树var len = charecters.length, //数组的长度index = 0, //索引从0开始//创建一个临时数组，用于存放二叉树节点//循环创建二叉树节点存放到数组中i++) {//循环建立二叉树子节点的引用var leftIndex = 2*index+1, //当前节点左孩子索引//当前节点右孩子索引//给当前节点添加左孩子//给当前节点添加右孩子index++;
JavaScript：二叉树（前序遍历，中序遍历，后序遍历，递归法，统一迭代法）
weixin_51249285的博客
05-06 1646
JavaScript：二叉树（前序遍历，中序遍历，后序遍历，递归法，统一迭代法）
二叉树的遍历（七种方法）
热门推荐
兔子王
10-23 1万+
本章主要通过运用递归与非递归方法分别对二叉树进行遍历 主要分先序遍历、中序遍历、后序遍历以及层次遍历四种情况进行讨论
前端算法：二叉树的前序遍历
weixin_56487494的博客
11-26 308
采用栈，先遍历根节点，同时将根节点出栈，存入数组arr，在将根节点的右节点和左节点入栈，先将右节点入栈，因为栈是后进先出，前序遍历是根节点>左节点>右节点。然后重复操作，直到栈的长度为0，也就是代表所有元素遍历完毕。
js实现二叉树的遍历，啃完999页前端面试高频宝典
2401_83944560的博客
03-28 945
var o = stack[stack.length-1];stack.splice(stack.length-1, 1);return o;};//检查栈是否为空this.isEmpty = function() {if(stack.length
JavaScript二叉树及各种遍历算法详情
百创科技
06-26 579
二叉树是每个节点最多只能有两个子节点的树，如下图所示：第i层的节点最有只有2^(i-1)个；如果这颗二叉树的深度为k，那二叉树最多有2^k-1个节点；在一个非空的二叉树中，若使用n0表示叶子节点的个数，n2是度为2的非叶子节点的个数，那么两者满足关系。
js实现二叉树遍历
YongxiaWu的博客
05-16 5745
js实现二叉树遍历二叉树遍历1、递归遍历（前、中、后）2、层序遍历3、重建二叉树参考文献 二叉树遍历 常用的二叉树的遍历方式：前序遍历、中序遍历、后序遍历、层序遍历 （1）前序遍历：左、右、根； （2）中序遍历：左、根、右； （3）后续遍历：左、右、根； （4）层序遍历：从上到下，同层节点从左到右。 1、递归遍历（前、中、后） //节点结构 /* function TreeNode(x) { ...
JS中的二叉树遍历详解
11-23
二叉树是由根节点，左子树，右子树组成，左子树和友子树分别是一个二叉树。 这篇文章主要在JS中实现二叉树的遍历。 一个二叉树的例子 var tree = { value: 1, left: { value: 2, left: { value: 4 } }, right: { value: 3, left: { value: 5, left: { value: 7 }, right: { value: 8 } }, right: { value: 6 } } } 广度优先遍历 广度优先遍历是从二
Js 实现 二叉树遍历
wsx1212123的博客
03-15 810
Js 实现 二叉树 定义二叉树 二叉树中，相对较小的值保存在左节点上，较大的值保存在右节点中 /*用来生成一个节点*/ function TreeNode(val, left, right) { this.val = (val===undefined ? 0 : val) this.left = (left===undefined ? null : left) this.right = (right===undefined ? null : right) } /*
前端必会算法——二叉树的遍历
qq_63664183的博客
04-06 538
二叉树的遍历顺序 前序遍历:先根次序遍历 先打印当前的, 再打印左边的, 再打印右边的, 先打印当前的; 先打印A,再打印左子树的根节点C然后再打印子树 F G 接着打印右子树的根节点 B 再打印子树 D E 前序遍历打印顺序:ACFGBDE 中序遍历: 中根次序遍历; 先打印左边的, 再打印当前的, 再打印右边的; 中序遍历打印顺序:FCGADBE 节点少的话,可以使用投影快速看出来,中序遍历的打印顺序(从左到右查看) 投影图： 后序遍历: 后根次序遍历; 先打印左边的, 再打印
JS 二叉树的三种遍历(递归)方式
衣乌安、随笔
05-17 1万+
所谓二叉树的遍历，是指按照一定的顺序对二叉树的每一个节点均访问一次，且只访问一次。按照访问根节点的访问位置不同通常把二叉树的遍历分为三种方式：前序遍历、中序遍历、后序遍历手画的图。。有点丑见谅一、前序遍历首先访问根节点，然后访问根节点的左子树，在访问根节点的右子树。遍历结果：abdefgc二、中序遍历首先访问根节点的左子树，然后访问根节点，再访问根节点右子树遍历结果: debgfac三、后序遍历首...
JS实现二叉树（前，中，后序遍历）
qq_35371821的博客
12-02 930
//二叉树方法 function BinaryTree(){ let Node=function(key){ this.key=key; this.left=null; this.right=null; } let root=null; let insertNode =(node,newNode)=>{ if(newNode.key < node.key){ ...
软考-数据结构所有知识点总结
weixin_43342105的博客
10-24 984
数组 是个程序员就不用多啰嗦了 稀疏矩阵 所谓的稀疏矩阵，就是当前矩阵中的大量元素是0或者是大量元素是同一个值，这时候我们只用存储一少部分不同的值。节省了空间 例题 用代入法代入排除选项 线性表 顺序表 开辟连续的存储空间，采用一维数组的形式存 链表 开辟离散的空间，每一个节点分为数据域和指针域 单链表 删除节点 p->next = q->next 插入节点 s-next = p->next; p->next =s; 单链表有头结点的有优点 有头节点可
js实现后序遍历二叉树
03-06
可以使用递归或迭代的方式实现后序遍历二叉树。递归方式是先遍历左子树，再遍历右子树，最后访问根节点。迭代方式可以使用栈来实现，先将根节点入栈，然后循环取出栈顶节点，如果该节点有左右子节点，则先将左右子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值