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

portrait de l'auteur

Écrit par Vincent Delmotte

Le 15 mars 2023

Dans cet article, vous allez découvrir cinq méthodes JavaScript incontournables qui vous permettront de reproduire des structures de données essentielles telles que la pile (stack) et la file (queue). Ces structures sont indispensables pour résoudre des problèmes complexes, tout en vous offrant une grande flexibilité pour manipuler vos tableaux. Vous apprendrez à utiliser push, pop, shift, unshift, et reverse à travers un exemple ludique : la gestion d’un menu de restaurant. Ces méthodes vous aideront à comprendre de manière concrète et amusante comment ajouter, retirer, et réorganiser des éléments dans un tableau. Préparez-vous à explorer ces outils puissants, à améliorer vos compétences en manipulation de tableaux et à résoudre des problèmes de manière plus efficace et élégante !

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.

[🍟, 🥗, 🍫]

Sans plus tarder, passons à table !

Illustration d'une assiette dans laquelle bon appetit est inscrit

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 [🍟, 🥗, 🍫]

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 [🍟, 🥗]

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 [🥗, 🍫]

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 [🍹, 🥨, 🍟, 🥗, 🍫]

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 [🍫, 🥗, 🍟]

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.

← Voir tous les articles