[3/4] Passez de zéro à héros avec ces méthodes JavaScript

vincent-delmotte

Vincent

Posted on March 15, 2023

[3/4] Passez de zéro à héros avec ces méthodes JavaScript

Les méthodes que nous verrons dans cet article vous permettront de reproduire deux structures de données célèbres que sont la pile (stack) et la file (queue). Ces structures de données permettent de résoudre des problèmes tels que l’évaluation d’expression, la vérification des parenthèses ou encore les moteurs de jeu tour par tour.

 
Je vous réfère à cet article pour en apprendre plus sur les problèmes qui se résolvent avec ces structures de données : 🔗 https://ayushmaan-singh19.medium.com/role-of-stacks-and-queues-in-problem-solving-44372a091040

 

Données d’exemple

Aujourd’hui nous allons prendre un exemple gourmand en utilisant un tableau regroupant des frites 🍟, une salade verte 🥗 pour la bonne conscience et enfin un petit désert, un chocolat 🍫. Ces éléments seront dans un tableau que l’on appellera le menu.

[🍟, 🥗, 🍫]
Enter fullscreen mode Exit fullscreen mode

Sans plus tarder, passons à table !

Image description

 

1. push

La méthode push permet d’ajouter un élément à la fin d’un tableau (utile pour la stack et la queue).

Prenons comme exemple la situation suivante : vous avez commandé vos frites 🍟 et votre salade 🥗 et le serveur arrive à votre table pour commander le dessert. Vous choisissez le chocolat 🍫.

[🍟, 🥗].push(🍫);

// Output : 3
// Tableau [🍟, 🥗, 🍫]
Enter fullscreen mode Exit fullscreen mode

Le serveur va donc ajouter le chocolat 🍫 au menu (tableau). Il suffit d’appliquer la méthode push au tableau avec le chocolat 🍫 en paramètre, et le tour est joué, vous avez commandé votre dessert.

La méthode push retourne la taille du tableau après l’ajout de l’élément, donc ici vous avez trois éléments dans votre menu.

 

2. pop

La méthode pop permet de supprimer le dernier élément d’un tableau et d’en récupérer sa valeur (utile pour la stack).

Imaginons que le serveur ait pris toute votre commande, mais vous décidez de retirer le chocolat 🍫 de votre menu (dernier élément) car vous avez eu les yeux plus gros que le ventre.

[🍟, 🥗, 🍫].pop();

// Output : 🍫
// Tableau [🍟, 🥗]
Enter fullscreen mode Exit fullscreen mode

Il suffit d’appliquer la méthode pop au tableau. Cette méthode va renvoyer la valeur de l’élément supprimé, ici 🍫. Il ne restera alors que les frites 🍟 et la salade 🥗 dans votre menu.

 

3. shift

La méthode shift permet de retirer le premier élément d’un tableau et de récupérer sa valeur (utile pour la queue).

Imaginons que le serveur ait pris toute votre commande, mais vous décidez de retirer les frites 🍟 de votre menu (premier élément) car vous avez déjà mangé un burger hier.

[🍟, 🥗, 🍫].shift();

// Output : 🍟
// Tableau [🥗, 🍫]
Enter fullscreen mode Exit fullscreen mode

Il suffit d’appliquer la méthode shift au tableau. Cette méthode va renvoyer la valeur de l’élément supprimé, ici 🍟. Il ne restera alors que la salade 🥗 et le chocolat 🍫 dans votre menu.

 

4. unshift

La méthode unshift permet d’insérer un élément ou plusieurs éléments au début d’un tableau (utile pour la queue).

Imaginons que le serveur ait pris votre commande, mais vous décider d’ajouter un cocktail 🍹 et des biscuits apéritifs 🥨. Ces deux éléments doivent apparaître en premier dans le menu.

[🍟, 🥗, 🍫].unshift(🍹, 🥨);

// Output : 5
// Tableau [🍹, 🥨, 🍟, 🥗, 🍫]
Enter fullscreen mode Exit fullscreen mode

Initialement votre menu était composé de frites 🍟, d’une salade 🥗 et d’un chocolat 🍫.

Pour ajouter au début du menu le cocktail 🍹 et les biscuits apéritifs 🥨, il suffit de faire unshift sur le tableau et de placer en paramètre les éléments à ajouter (ici 🍹 et 🥨).

Le retour de la méthode unshift est la taille du tableau après ajout du ou des éléments, ici on est donc à 5 éléments dans le menu.

 

5. reverse

La fonction reverse comme son nom l’indique permet d’inverser l’ordre des éléments d’un tableau (utile pour la stack et la queue).

Ce soir au restaurant, c’est la soirée sens dessus dessous. Vous commandez un menu et vous le consommez à l’envers ! On commence par le dessert et on fini par l’entrée.

Le serveur vient prendre votre commande et doit l’inverser pour la transmettre à la cuisine.

[🍟, 🥗, 🍫].reverse()

// Output [🍫, 🥗, 🍟]
Enter fullscreen mode Exit fullscreen mode

Il suffit d’appliquer la méthode reverse sur le menu. La méthode renvoie le tableau inversé. Le serveur peut ainsi communiquer votre commande à la cuisine et vous pouvez profiter de cette belle soirée sens dessus dessous.

 

Conclusion

J’espère que vous avez apprécier votre repas et que vous n’avez plus faim ! Dans cet article, nous avons vu les méthodes qui permettent de construire les structures de données stack et queue, qui sont des structures de données très puissante pour résoudre des problèmes complexes.

Toutefois, ces méthodes ne doivent pas exclusivement être utilisées dans ce contexte car elles restent très intéressantes pour faire des opérations sur les tableaux.

💖 💪 🙅 🚩
vincent-delmotte
Vincent

Posted on March 15, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related