本文主要介绍了javascript实现二叉树的先序、中序及后序遍历方法,结合实例形式总结分析了javascript二叉树的先序、中序及后序遍历实现方法与相关操作注意事项,需要的朋友可以参考下，希望能帮助到大家。
本文实例讲述了javascript实现二叉树的先序、中序及后序遍历方法。分享给大家供大家参考，具体如下：
之前学数据结构的时候，学了二叉树的先序、中序、后序遍历的方法，并用c语言实现了，下文是用js实现二叉树的3种遍历，并以动画的形式展现出遍历的过程。
整个遍历过程还是采用递归的思想，原理很粗暴也很简单
先序遍历的函数：
function preorder(node){
if(!(node==null)){
plist.push(node);
preorder(node.firstelementchild);
preorder(node.lastelementchild);
}
}
中序遍历的函数：
function inorder(node) {
if (!(node == null)) {
inorder(node.firstelementchild);
plist.push(node);
inorder(node.lastelementchild);
}
}
后序遍历的函数：
function postorder(node) {
if (!(node == null)) {
postorder(node.firstelementchild);
postorder(node.lastelementchild);
plist.push(node);
}
}
颜色变化函数：
function changecolor(){
var i=0;
plist[i].style.backgroundcolor = 'blue';
timer=setinterval(function(argument){
i++;
if(i<plist.length){
plist[i-1].style.backgroundcolor="#fff";
plist[i].style.backgroundcolor="blue";
}
else{
plist[plist.length-1].style.backgroundcolor="#fff";
}
},500)
}
核心代码如上，本来想写深度优先遍历和广度优先遍历。后来发现二叉树深度优先遍历和先序遍历相同。改日总结一下树的bfs和dfs。
全部代码如下：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
.root{
display: flex;
padding: 20px;
width: 1000px;
height: 300px;border: 1px solid #000000;
margin: 100px auto;
margin-bottom: 10px;
justify-content: space-between;
}
.child_1{
display: flex;
padding: 20px;
width: 450px;
height: 260px;border: 1px solid red;
justify-content: space-between;
}
.child_2{
display: flex;
padding: 20px;
width: 170px;
height: 220px;border: 1px solid green;
justify-content: space-between;
}
.child_3{
display: flex;
padding: 20px;
width: 35px;
height: 180px;border: 1px solid blue;
justify-content: space-between;
}
input{
margin-left: 100px;
width: 60px;
height: 40px;
font:20px italic;
}
</style>
</head>
<body>
<p class="root">
<p class="child_1">
<p class="child_2">
<p class="child_3"></p>
<p class="child_3"></p>
</p>
<p class="child_2">
<p class="child_3"></p>
<p class="child_3"></p>
</p>
</p>
<p class="child_1">
<p class="child_2">
<p class="child_3"></p>
<p class="child_3"></p>
</p>
<p class="child_2">
<p class="child_3"></p>
<p class="child_3"></p>
</p>
</p>
</p>
<input type="button" value="先序">
<input type="button" value="中序">
<input type="button" value="后序">
<script type="text/javascript" src="遍历.js"></script>
</body>
</html>
js:
/**
* created by hp on 2016/12/22.
*/
var btn = document.getelementsbytagname('input'),
prebtn = btn[0],
inbtn = btn[1],
postbtn = btn[2],
treeroot = document.getelementsbyclassname('root')[0],
plist = [],
timer = null;
window.onload=function(){
prebtn.onclick = function () {
reset();
preorder(treeroot);
changecolor();
}
inbtn.onclick = function () {
reset();
inorder(treeroot);
changecolor();
}
postbtn.onclick = function () {
reset();
postorder(treeroot);
changecolor();
}
}
/*先序遍历*/
function preorder(node){
if(!(node==null)){
plist.push(node);
preorder(node.firstelementchild);
preorder(node.lastelementchild);
}
}
/*中序遍历*/
function inorder(node) {
if (!(node == null)) {
inorder(node.firstelementchild);
plist.push(node);
inorder(node.lastelementchild);
}
}
/*后序遍历*/
function postorder(node) {
if (!(node == null)) {
postorder(node.firstelementchild);
postorder(node.lastelementchild);
plist.push(node);
}
}
/*颜色变化函数*/
function changecolor(){
var i=0;
plist[i].style.backgroundcolor = 'blue';
timer=setinterval(function(argument){
i++;
if(i<plist.length){
plist[i-1].style.backgroundcolor="#fff";
plist[i].style.backgroundcolor="blue";
}
else{
plist[plist.length-1].style.backgroundcolor="#fff";
}
},500)
}
function reset(){
plist=[];
clearinterval(timer);
var ps=document.getelementsbytagname("p");
for(var i=0;i<ps.length;i++){
ps[i].style.backgroundcolor="#fff";
}
}
由此可见，二叉树的遍历思想是一样的。之前一直把js看做是写各种特效的语言，现在向来是too naive了。
相关推荐：
php中关于完全二叉树的定义方法详解
java最小二叉树堆排序的实现方法
js实现数据结构: 树和二叉树,二叉树的遍历和基本操作方法
以上就是javascript实现二叉树的先序、中序及后序遍历方法的详细内容。