Tutoriel JS For Loop - Comment itérer sur un tableau en JavaScript

Cet article vous fournira une solide compréhension de la manière exacte d'itérer sur une structure de données Array en JavaScript.

Que vous commenciez tout juste à apprendre JavaScript ou que vous soyez ici pour un rappel, il y aura de la valeur pour vous dans les deux cas. Cet article vous présente l'un des concepts JavaScript les plus utilisés.

Qu'est-ce qu'un tableau?

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

Ci-dessus, un tableau JavaScript utilisé pour stocker plusieurs valeurs. C'est l'une des formes les plus simples d'un tableau. Il contient 4 «éléments» à l'intérieur du tableau, toutes des chaînes. Et comme vous pouvez le voir, chaque élément est séparé par une virgule.

Cet exemple de tableau contient différentes marques de voitures et peut être référencé avec la carsvariable.

Il existe plusieurs manières de parcourir ce tableau. JavaScript est incroyablement riche en fonctionnalités, nous avons donc le luxe de choisir la meilleure façon de résoudre notre problème.

Voici comment nous allons aborder l'itération sur des tableaux en JavaScript:

  1. Mettre en évidence 5 méthodes courantes pour itérer sur un tableau
  2. Afficher des informations sur chaque méthode itérative
  3. Fournissez également du code que vous pouvez utiliser pour le tester!

Boucle For traditionnelle

Qu'est-ce qu'une boucle For?

Wikipedia définit une boucle For comme suit:

«En informatique, une boucle for (ou simplement une boucle for ) est une instruction de flux de contrôle pour spécifier l'itération, qui permet au code d'être exécuté à plusieurs reprises.»

Une boucle for est un moyen d'exécuter du code à plusieurs reprises. Au lieu de taper console.log(“hi”)cinq fois, vous pouvez l'envelopper dans une boucle for.

Dans ce premier exemple, nous allons apprendre à parcourir le tableau de voitures que vous avez vu ci-dessus et à imprimer chaque élément. L'itérateur, ou compteur, commencera au premier index «Tesla» et se terminera au dernier «Audi». Il se déplace dans le tableau et imprime un élément à la fois.

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }

Production:

Tesla Ferrari Lamborghini Audi

En plongeant dans le code, nous passons trois options à la boucle for

  • la variable itérateur - let i = 0;
  • où l'itérateur doit s'arrêter - i < card.length
  • de combien incrémenter l'itérateur à chaque boucle - i++

Cette boucle commence à 0, augmente la variable d'une à chaque boucle et s'arrête lorsque nous atteignons le dernier élément du tableau.

Le principal avantage de la boucle for traditionnelle est que vous avez plus de contrôle.

Il est possible d'accéder à différents éléments du tableau, ou de parcourir le tableau de manière sophistiquée pour résoudre un problème complexe. Par exemple, sauter tous les autres éléments du tableau peut être fait assez facilement avec la boucle for traditionnelle.

La méthode forEach

Quelle est la méthode forEach?

La forEachméthode est utilisée pour exécuter une fonction pour chaque élément de votre tableau. Cette méthode est un excellent choix si la longueur du tableau est «inconnue», ou garantie de changer. Cette méthode ne peut être utilisée qu'avec les tableaux, les ensembles et les cartes.

const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);

Le plus grand avantage d'une forEachboucle est de pouvoir accéder à chaque élément, même si votre baie est susceptible d'augmenter en taille. Il s'agit d'une solution évolutive pour de nombreux cas d'utilisation et est plus facile à lire et à comprendre qu'une boucle for traditionnelle car nous savons que nous allons itérer sur chaque élément exactement une fois.

Alors que la boucle

Qu'est-ce qu'une boucle While?

Wikipedia définit une boucle While comme:

«Une boucle while est une instruction de flux de contrôle qui permet au code d'être exécuté à plusieurs reprises en fonction d'une condition booléenne donnée. Le tout en boucle peut être considérée comme une répétition instruction if. "

Une whileboucle est un moyen d'exécuter du code à plusieurs reprises pour vérifier si une condition est vraie ou fausse. Ainsi, au lieu d'utiliser une boucle for, avec une instruction if imbriquée, nous pouvons utiliser une boucle while. Ou, si nous ne pouvons pas trouver la longueur du tableau, les boucles sont un excellent choix.

La boucle while est souvent contrôlée par un compteur. Dans l'exemple ci-dessous, nous montrons une boucle while de base itérant dans un tableau. La clé est d'avoir le contrôle sur la boucle while que vous créez.

Exemple de boucle While (bon):

let i = 0 while (i < 5) { console.log(i); i++; }

Sortie :

0 1 2 3 4

L'instruction if de la boucle while est i < 5, ou prononcée à voix haute, "i est inférieur à 5". La variable iest incrémentée à chaque exécution de la boucle.

En termes simples, cela signifie que 1 est ajouté à la variable ichaque fois que la boucle effectue une itération complète. À la première itération, iest égal à 0, et nous affichons «0» sur la console.

Le plus grand risque d'utiliser une boucle while est d'écrire une condition qui n'est jamais remplie.

Cela se produit fréquemment dans les scénarios du monde réel, où quelqu'un écrit une boucle while mais oublie de tester sa boucle, et cela introduit une boucle infinie dans la base de code.

Une boucle infinie se produit lorsque la condition n'est jamais remplie et la boucle continue de s'exécuter pour toujours. Cela entraîne souvent des modifications importantes, ce qui provoque la rupture et l'arrêt de l'ensemble de l'application logicielle.

Attention: ne pas exécuter ce code.

Exemple de boucle infinie (mauvais):

let i = 0 while (i < 5) { console.log(i); }

Production:

Les résultats peuvent varier.

La boucle Do While

Qu'est-ce qu'une boucle do while?

Wikipedia définit une boucle Do-While comme:

«Une boucle do while est une instruction de flux de contrôle qui exécute un bloc de code au moins une fois , puis exécute à plusieurs reprises le bloc, ou non, selon une condition booléenne donnée à la fin du bloc.»

Une boucle do-while est presque identique à une boucle while, mais il existe une différence clé. La boucle do-while garantira de toujours exécuter le bloc de code au moins une fois avant que l'instruction if ne soit vérifiée.

Je pense souvent que c'est une boucle while inversée, et je ne les utilise presque jamais. Cependant, ils sont utiles dans certains scénarios très spécifiques.

Exemple de Do-Loop (bon):

let i = 0; do { console.log(i); i++; } while (i < 5);

Sortie :

0 1 2 3 4

Le plus grand risque d'utiliser une boucle do est d'écrire une condition qui n'est jamais remplie. (Identique à une boucle While.)

Attention: ne pas exécuter ce code.

Exemple de boucle infinie (mauvais):

let i = 0; do { console.log(i); } while (i < 5);

Sortie :

Les résultats peuvent varier.

Vous voulez faire passer vos connaissances JavaScript au niveau supérieur? Renseignez-vous map, ce qui est le même que forEach, mais avec un bonus !! ?

Exemple BONUS (Itération avec carte)

Qu'est-ce que la carte?

Wikipédia définit une carte comme:

«Dans de nombreux langages de programmation, map est le nom d'une fonction d'ordre supérieur qui applique une fonction donnée à chaque élément d'un foncteur, par exemple une liste, renvoyant une liste de résultats dans le même ordre. Elle est souvent appelée « s'applique à tous» lorsqu'elle est considérée sous sa forme fonctionnelle. »

How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.

Afterwards, the map function returns a new array with the results of applying a function to every element in the array.

Map example:

const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);

Output:

[2,2,2,2]

We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.

By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.

Conclusion

Well done! You have learned five different ways to iterate over an array in JavaScript. These are the fundamental building blocks that will set you up for success in your JavaScript programming journey.

You have also been exposed to an advanced concept, map, which is used often in large-scale software applications.

So, I’ll leave you with this: how are you going to use arrays in your projects? And which iteration method did you find most exciting?  

Thanks for reading!

If you liked my article, please follow me and/or send me a message!  

Twitter • Medium • Github