Rekursionsbaum und Aufrufstapel Visualisieren

Füge eine rekursive Funktion ein, führe sie aus und visualisiere den Aufrufbaum mit Memoization-Überlagerung.

Füge eine beliebige rekursive JavaScript-Funktion ein und visualisiere ihren gesamten Aufrufbaum Schritt für Schritt. Sieh jeden Funktionsaufruf als interaktiven Knoten mit Argumenten und Rückgabewerten. Aktiviere die Memoization, um zu vergleichen, wie Caching doppelte Zweige eliminiert. Steuere die Animationsgeschwindigkeit, gehe Aufruf für Aufruf vor oder zeige den vollständigen Baum sofort an. Integrierte Vorlagen für Fibonacci, Fakultät, Potenz, GGT und Türme von Hanoi. Alles läuft isoliert in deinem Browser ohne Serveraufrufe.

Deine Daten bleiben in deinem Browser
War dieses Tool hilfreich?
Anleitung

So verwendest du den Rekursionsbaum-Visualisierer

1
1

Wähle eine Vorlage oder füge Code ein

Klicke auf eine Vorlage wie Fibonacci oder füge deine eigene rekursive JavaScript-Funktion ein.

2
2

Lege Argumente fest und führe aus

Gib die Funktionsargumente ein und klicke auf Ausführen, um den Aufrufbaum zu erstellen.

3
3

Erkunde den Baum

Verschiebe, zoome und untersuche die Knoten, um Argumente und Rückgabewerte für jeden Aufruf zu sehen.

4
4

Memoization aktivieren

Aktiviere die Memoization, um zu sehen, wie Caching doppelte Zweige eliminiert und die Gesamtanzahl der Aufrufe reduziert.

5
5

Schritt für Schritt animieren

Klicke auf Animieren, um Aufrufe der Reihe nach zu sehen, oder verwende Schritt, um einen Aufruf nach dem anderen vorzugehen.

Guide

Rekursionsbäume und Aufrufstapel verstehen

Was ist ein Rekursionsbaum?

Ein Rekursionsbaum ist eine visuelle Darstellung jedes Aufrufs, den eine rekursive Funktion macht. Jeder Knoten zeigt die übergebenen Argumente und den zurückgegebenen Wert. Eltern-Kind-Kanten repräsentieren, welcher Aufruf welchen Unteraufruf erzeugt hat. Durch das Lesen des Baums von oben nach unten kannst du die genaue Ausführungsreihenfolge nachvollziehen und verstehen, wie das Problem in kleinere Teilprobleme zerlegt wird.

Warum Memoization wichtig ist

Viele rekursive Algorithmen besuchen dieselben Teilprobleme mehrfach; Fibonacci ist das klassische Beispiel, bei dem fib(3) mehr als einmal berechnet wird. Memoization speichert die Ergebnisse bereits gelöster Teilprobleme, damit sie bei Wiederholungsaufrufen sofort zurückgegeben werden. Diese Technik wandelt exponentielle Zeitkomplexität in polynomiale oder lineare Komplexität um – das ist der Kerngedanke der dynamischen Programmierung.

Den Aufrufstapel lesen

Der Aufrufstapel ist die Kette aktiver Funktionsaufrufe zu einem beliebigen Zeitpunkt während der Ausführung. In diesem Visualisierer entspricht die Tiefe eines Knotens seiner Position im Stapel. Tiefe Bäume bedeuten mehr Stack-Frames, was in echten Programmen zu Stack-Overflow-Fehlern führen kann. Das Beobachten der Stapeltiefe hilft dir, den Speicherverbrauch zu verstehen und zu erkennen, wann ein iterativer Ansatz sicherer wäre.

Häufige Rekursionsmuster

Lineare Rekursion ruft sich einmal pro Aufruf selbst auf; Beispiele sind Fakultät und Durchlauf von verketteten Listen. Binäre Rekursion macht zwei Aufrufe pro Aufruf; Fibonacci und Mergesort folgen diesem Muster. Baumrekursion verallgemeinert auf drei oder mehr Zweige, wie bei den Türmen von Hanoi. Das Verstehen dieser Muster hilft dir, die Zeitkomplexität vorherzusagen, bevor du Code schreibst.

Sources

Examples

Ausgearbeitete Beispiele

Fibonacci fib(4)

function fib(n) { if (n <= 1) return n; return fib(n-1) + fib(n-2); }

1

fib(4) ruft fib(3) und fib(2) auf

2

fib(3) ruft fib(2) und fib(1) auf

3

fib(2) ruft fib(1) und fib(0) auf

4

Basisfälle geben 0 oder 1 zurück

5

Ergebnisse propagieren nach oben: fib(4) = 3

9 Aufrufe gesamt ohne Memo; 7 mit Memo (fib(2) und fib(1) gecacht)

Fakultät fact(5)

function fact(n) { if (n <= 1) return 1; return n * fact(n-1); }

1

fact(5) ruft fact(4) auf

2

Die Kette setzt sich fort: fact(3) -> fact(2) -> fact(1)

3

Basisfall fact(1) gibt 1 zurück

4

Multiplikation nach oben: 1*2*3*4*5

5 Aufrufe gesamt; lineare Rekursion hat keine doppelten Teilprobleme

Anwendungsfälle

Anwendungsfälle

Fibonacci-Rekursion verstehen

Visualisiere, wie fib(5) ohne Memoization 15 Aufrufe erzeugt, aber mit Memoization nur 9 – und entdecke die exponentielle-zu-lineare Optimierung in der dynamischen Programmierung.

Einen eigenen rekursiven Algorithmus debuggen

Füge deine Mergesort- oder Baumdurchlauf-Funktion ein, um die genaue Aufreihenfolge, Argumente und Rückgabewerte auf jeder Rekursionsebene zu untersuchen.

Konzepte der dynamischen Programmierung lehren

Zeige Studierenden anhand des Rekursionsbaums, wie Memoization redundante Teilprobleme durch das Ausgrauen gecachter Zweige eliminiert.

Häufig gestellte Fragen

?Welche Programmiersprachen werden unterstützt?

Derzeit werden JavaScript-Funktionen unterstützt. Die Funktion muss Standard-JS-Syntax mit einer benannten Funktionsdeklaration verwenden.

?Gibt es eine Begrenzung der Rekursionstiefe?

Ja, die Ausführung ist auf 200 Gesamtaufrufe und 50 Tiefenebenen begrenzt, um das Einfrieren des Browsers zu verhindern.

?Wie funktioniert der Memoization-Modus?

Wenn aktiviert, geben doppelte Aufrufe mit denselben Argumenten gecachte Ergebnisse zurück. Gecachte Knoten erscheinen ausgegraut mit einem Memo-Abzeichen.

?Wird mein Code an einen Server gesendet?

Nein. Die gesamte Codeausführung erfolgt lokal in deinem Browser über einen isolierten Function-Konstruktor. Nichts verlässt dein Gerät.

?Ist dieses Tool kostenlos?

Ja, vollständig kostenlos und ohne Einschränkungen. Keine Registrierung oder Zahlung erforderlich.

?Kann ich meine eigene rekursive Funktion verwenden?

Natürlich. Ersetze den Vorlagencode durch eine beliebige benannte JavaScript-Funktion, die sich selbst rekursiv aufruft.

?Was bedeuten die grauen Knoten?

Graue Knoten mit einem Memo-Abzeichen zeigen gecachte Aufrufe an; die Funktion hat ein memoiziertes Ergebnis zurückgegeben, ohne neu zu berechnen.

?Warum zeigt meine Funktion einen Fehler an?

Stelle sicher, dass dein Code eine gültige benannte Funktionsdeklaration ist. Pfeilfunktionen und anonyme Funktionen werden nicht unterstützt.

Hilf uns besser zu werden

Wie gefällt Ihnen dieses Tool?

Jedes Tool bei Kitmul wird auf Basis echter Nutzeranfragen gebaut. Ihre Bewertung und Ihre Vorschläge helfen uns, Bugs zu beheben, fehlende Funktionen hinzuzufügen und die Tools zu bauen, die Sie wirklich brauchen.

Dieses Tool bewerten

Tippen Sie auf einen Stern, um uns zu sagen, wie nützlich dieses Tool für Sie war.

Vorschlag machen oder Bug melden

Eine Funktion fehlt? Einen Bug gefunden? Haben Sie eine Idee? Sagen Sie es uns und wir schauen es uns an.

Ähnliche Tools

Newsletter

Erhalte Produktivitätstipps und Neue Tools Zuerst

Schließe dich Machern und Entwicklern an, die Datenschutz schätzen. Jede Ausgabe: neue Tools, Produktivitäts-Hacks und Updates — kein Spam.

Prioritätszugang zu neuen Tools
Jederzeit abbestellen, ohne Rückfragen