Dieses Mal werde ich Ihnen die Implementierungsmethode für die Vorbestellung, In-Order- und Post-Order-Durchquerung des JS-Binärbaums vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der -Methode für die Vorbestellung? Reihenfolge, In-Order- und Post-Order-Durchquerung des JS-Binärbaums. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Als ich zuvor die Datenstruktur lernte, lernte ich die Methoden des Vorbestellungs-, In-Order- und Post-Order-Durchlaufs von Binärbäumen und implementierte sie in der C-Sprache. Das Folgende ist die Implementierung von drei Durchläufen von Binärbäumen mit js, und animierte Form zeigt den Prozess der Durchquerung.
Der gesamte Durchlaufprozess verwendet immer noch rekursives Denken, und das Prinzip ist sehr grob und einfach
Funktion für die Vorbestellungsdurchquerung:
function preOrder(node){
if(!(node==null)){
pList.push(node);
preOrder(node.firstElementChild);
preOrder(node.lastElementChild);
}
}Funktion für In-Order-Traversal:
function inOrder(node) {
if (!(node == null)) {
inOrder(node.firstElementChild);
pList.push(node);
inOrder(node.lastElementChild);
}
}Postorder-Traversal-Funktion:
function postOrder(node) {
if (!(node == null)) {
postOrder(node.firstElementChild);
postOrder(node.lastElementChild);
pList.push(node);
}
}Farbwechselfunktion:
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)
}Der Kerncode ist wie oben. Ursprünglich wollte ich eine Tiefendurchquerung und eine Breitendurchquerung schreiben. Später wurde entdeckt, dass die Tiefendurchquerung eines Binärbaums mit der Vorbestellungsdurchquerung identisch ist. Ich werde die BFS und DFS von Bäumen an einem anderen Tag zusammenfassen.
Alle Codes lauten wie folgt:
<!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";
}
}Es ist ersichtlich, dass die Idee des Durchlaufens eines Binärbaums dieselbe ist. Früher habe ich JS als eine Sprache zum Schreiben verschiedener Spezialeffekte betrachtet, aber jetzt war es immer zu naiv.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So erhalten Sie die Gleitdistanzlänge des Berührungsereignisses
JS+H5+C3 zur Implementierung Popup-Fenster
Das obige ist der detaillierte Inhalt vonImplementierungsmethode für die Durchquerung des JS-Binärbaums vor, in der Reihenfolge und nach der Bestellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
