用JavaScript写的二叉树遍历,前序没有问题,但是后序和中序遇到了bug,求高人指点
本文介绍了用JavaScript写的二叉树遍历,前序没有问题,但是后序和中序遇到了bug,求高人指点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
最近在写百度前端技术学院的作业,写到第22题二叉树遍历,题目要求:
http://ife.baidu.com/task/det...
我写的demo:
https://yisha0307.github.io/I...
html代码:
https://github.com/yisha0307/...
js代码:
https://github.com/yisha0307/...
我遇到的问题是:我的前序没有问题,但是中序和后序出现了bug,没法做动画,但是我的前序、中序、后序的代码几乎一致,我实在看不出来有啥不对的地方啊,还请高人指点一二:
贴一段我的代码(更详细的可以看我上面贴的地址,但我觉得是这个inOrder和postOrder不知哪里出了bug):
var preOrder = function(node){
if(node !== null){
nodeArr.push(node);
preOrder(node.firstElementChild);
preOrder(node.lastElementChild);
}
render(nodeArr);
};
var inOrder = function(node){
if(node !== null){
inOrder(node.firstElementChild);
nodeArr.push(node);
inOrder(node.lastElementChild);
}
render(nodeArr);
};
var postOrder = function(node){
if(node !== null){
postOrder(node.firstElementChild);
postOrder(node.lastElementChild);
nodeArr.push(node);
}
render(nodeArr);
};
解决方案
代码看着没毛病,建议题主利用console单步调试一下就知道了!
其实主要在于,render方法的执行问题,inOrder在遍历的时候一直递归到最左子树的时候,最左节点的firstElementChild
是null,然后inOrder(null)
,结果就是if判断跳过直接就render([]),此时nodeArr根本就没有元素在里面,因为你还在递归第一个inOrder还没到push的情况。
同样postOrder也是这个道理!
根据你这个代码来看,最简单的就是把render抽出来,放到点击回调执行完遍历得到nodeArr之后,再调用
$(document).ready(function(){
var treeRoot = $('body > div')[0];
$('#root').click(function(){
reset();
preOrder(treeRoot);
render(nodeArr);
});
$('#left').click(function(){
reset();
inOrder(treeRoot);
render(nodeArr);
});
$('#right').click(function(){
reset();
postOrder(treeRoot);
render(nodeArr);
});
})
var timer=null, nodeArr =[];
var preOrder = function(node){
if(node !== null){
nodeArr.push(node);
preOrder(node.firstElementChild);
preOrder(node.lastElementChild);
}
console.log(nodeArr);
//render(nodeArr);
};
var inOrder = function(node){
if(node !== null){
inOrder(node.firstElementChild);
nodeArr.push(node);
inOrder(node.lastElementChild);
}
console.log(nodeArr);
//render(nodeArr);
};
var postOrder = function(node){
if(node !== null){
postOrder(node.firstElementChild);
postOrder(node.lastElementChild);
nodeArr.push(node);
}
console.log(nodeArr);
//render(nodeArr);
};
var render = function(arr){
var i=0;
arr[i].style.backgroundColor='pink';
timer = setInterval(function(){
if(i<arr.length-1){
i++;
arr[i-1].style.backgroundColor = 'white';
arr[i].style.backgroundColor = 'pink';
}else{
arr[arr.length-1].style.backgroundColor ='white';
window.clearInterval(timer);
}
},500);
};
var reset = function(){
nodeArr=[];
window.clearInterval(timer);
$('div').css('background-color','white');
}
这篇关于用JavaScript写的二叉树遍历,前序没有问题,但是后序和中序遇到了bug,求高人指点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文