Visualiser l'Arbre de Récursion et la Pile d'Appels

Collez une fonction récursive, exécutez-la et visualisez l'arbre d'appels avec superposition de mémoïsation.

Collez n'importe quelle fonction récursive JavaScript et visualisez son arbre d'appels complet étape par étape. Voyez chaque appel de fonction comme un nœud interactif avec ses arguments et valeurs de retour. Activez la mémoïsation pour comparer comment la mise en cache élimine les branches dupliquées. Contrôlez la vitesse d'animation, avancez pas à pas ou affichez l'arbre complet instantanément. Préréglages intégrés pour Fibonacci, Factorielle, Puissance, PGCD et Tours de Hanoï. Tout s'exécute en sandbox dans votre navigateur sans aucun appel serveur.

Vos données restent dans votre navigateur
Cet outil vous a-t-il été utile ?
Tutoriel

Comment utiliser le Visualiseur d'Arbre de Récursion

1
1

Sélectionnez un préréglage ou collez votre code

Cliquez sur un préréglage comme Fibonacci ou collez votre propre fonction récursive JavaScript.

2
2

Définissez les arguments et exécutez

Saisissez les arguments de la fonction et cliquez sur Exécuter pour construire l'arbre d'appels.

3
3

Explorez l'arbre

Déplacez-vous, zoomez et inspectez les nœuds pour voir les arguments et valeurs de retour de chaque appel.

4
4

Activez la mémoïsation

Activez la mémoïsation pour voir comment la mise en cache élimine les branches dupliquées et réduit le nombre total d'appels.

5
5

Animez pas à pas

Cliquez sur Animer pour voir les appels se dérouler dans l'ordre, ou utilisez Étape pour avancer un appel à la fois.

Guide

Comprendre les arbres de récursion et les piles d'appels

Qu'est-ce qu'un arbre de récursion ?

Un arbre de récursion est une représentation visuelle de chaque appel effectué par une fonction récursive. Chaque nœud affiche les arguments reçus et la valeur retournée. Les arêtes parent-enfant représentent quel appel a engendré quel sous-appel. En lisant l'arbre de haut en bas, vous pouvez retracer l'ordre d'exécution exact et comprendre comment le problème se décompose en sous-problèmes plus petits.

Pourquoi la mémoïsation est importante

Beaucoup d'algorithmes récursifs revisitent les mêmes sous-problèmes plusieurs fois ; Fibonacci est l'exemple classique où fib(3) est calculé plus d'une fois. La mémoïsation stocke les résultats des sous-problèmes déjà résolus afin qu'ils soient retournés instantanément lors d'appels répétés. Cette technique transforme une complexité temporelle exponentielle en complexité polynomiale ou linéaire, ce qui est l'idée centrale de la programmation dynamique.

Lire la pile d'appels

La pile d'appels est la chaîne des appels de fonction actifs à tout moment pendant l'exécution. Dans ce visualiseur, la profondeur d'un nœud correspond à sa position dans la pile. Des arbres profonds signifient plus de cadres de pile, ce qui peut entraîner des erreurs de débordement de pile dans de vrais programmes. Observer la profondeur de la pile vous aide à comprendre l'utilisation de la mémoire et à identifier quand une approche itérative serait plus sûre.

Patterns de récursion courants

La récursion linéaire s'appelle elle-même une fois par invocation ; les exemples incluent la factorielle et le parcours de liste chaînée. La récursion binaire fait deux appels par invocation ; Fibonacci et le tri fusion suivent ce schéma. La récursion arborescente se généralise à trois branches ou plus, comme dans les Tours de Hanoï. Comprendre ces patterns vous aide à prédire la complexité temporelle avant même d'écrire le code.

Sources

Examples

Exemples résolus

Fibonacci fib(4)

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

1

fib(4) appelle fib(3) et fib(2)

2

fib(3) appelle fib(2) et fib(1)

3

fib(2) appelle fib(1) et fib(0)

4

Les cas de base retournent 0 ou 1

5

Les résultats remontent : fib(4) = 3

9 appels totaux sans mémo ; 7 avec mémo (fib(2) et fib(1) mis en cache)

Factorielle fact(5)

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

1

fact(5) appelle fact(4)

2

La chaîne continue : fact(3) -> fact(2) -> fact(1)

3

Le cas de base fact(1) retourne 1

4

Multiplication en remontant : 1*2*3*4*5

5 appels totaux ; la récursion linéaire n'a pas de sous-problèmes dupliqués

Cas d'utilisation

Cas d'utilisation

Comprendre la récursion de Fibonacci

Visualisez comment fib(5) génère 15 appels sans mémoïsation mais seulement 9 avec, révélant l'optimisation exponentielle-à-linéaire en programmation dynamique.

Déboguer un algorithme récursif personnalisé

Collez votre fonction de tri fusion ou de parcours d'arbre pour inspecter l'ordre exact des appels, les arguments et les valeurs de retour à chaque niveau de récursion.

Enseigner les concepts de programmation dynamique

Montrez aux étudiants comment la mémoïsation élimine les sous-problèmes redondants en grisonnant les branches mises en cache dans l'arbre de récursion.

Foire aux questions

?Quels langages de programmation sont pris en charge ?

Actuellement, les fonctions JavaScript sont prises en charge. La fonction doit utiliser la syntaxe JS standard avec une déclaration de fonction nommée.

?Y a-t-il une limite de profondeur de récursion ?

Oui, l'exécution est limitée à 200 appels totaux et 50 niveaux de profondeur pour éviter le gel du navigateur.

?Comment fonctionne le mode mémoïsation ?

Lorsqu'il est activé, les appels dupliqués avec les mêmes arguments renvoient des résultats mis en cache. Les nœuds mis en cache apparaissent en gris avec un badge mémo.

?Mon code est-il envoyé à un serveur ?

Non. Toute l'exécution du code se fait localement dans votre navigateur via un constructeur Function isolé. Rien ne quitte votre appareil.

?Cet outil est-il gratuit ?

Oui, entièrement gratuit et sans limites. Aucune inscription ni paiement requis.

?Puis-je utiliser ma propre fonction récursive ?

Absolument. Remplacez le code du préréglage par n'importe quelle fonction JavaScript nommée qui s'appelle elle-même de manière récursive.

?Que signifient les nœuds gris ?

Les nœuds gris avec un badge mémo indiquent des appels mis en cache ; la fonction a retourné un résultat mémoïsé sans recalcul.

?Pourquoi ma fonction affiche-t-elle une erreur ?

Assurez-vous que votre code est une déclaration de fonction nommée valide. Les fonctions fléchées et les fonctions anonymes ne sont pas prises en charge.

Aidez-nous à améliorer

Aimez-vous cet outil ?

Chaque outil Kitmul est construit à partir de vraies demandes d'utilisateurs. Votre note et vos suggestions nous aident à corriger des bugs, ajouter des fonctionnalités manquantes et créer les outils dont vous avez vraiment besoin.

Notez cet outil

Cliquez sur une étoile pour nous dire si cet outil vous a été utile.

Suggérez une amélioration ou signalez un bug

Une fonctionnalité manque ? Vous avez trouvé un bug ? Une idée ? Dites-le-nous et nous l'examinerons.

Outils associés

Newsletter

Recevez des Conseils Productivité et les Nouveaux Outils en Premier

Rejoignez les créateurs et développeurs qui valorisent la confidentialité. Chaque édition : nouveaux outils, astuces productivité et mises à jour — sans spam.

Accès prioritaire aux nouveaux outils
Désabonnez-vous à tout moment, sans questions