Boucle JavaScript à travers un tableau

1. Utilisez la boucle for pour parcourir un tableau en JavaScript
2. Utilisez la boucle while pour parcourir un tableau en JavaScript
3. Utilisez la boucle do...while pour parcourir un tableau en JavaScript
4. Utilisez la boucle forEach pour parcourir un tableau en JavaScript
5. Utilisez for...of pour parcourir un tableau en JavaScript
6. Utilisez for...in pour parcourir un tableau en JavaScript
7. Utilisez la méthode map pour parcourir un tableau en JavaScript
8. Utilisez la méthode reduce pour parcourir un tableau en JavaScript
9. Utilisez la méthode filter pour parcourir un tableau en JavaScript
10. Utilisez some pour parcourir un tableau en JavaScript
11. Utilisez every pour parcourir un tableau en JavaScript

Ce didacticiel explique comment parcourir un tableau en JavaScript. Nous pouvons le faire en utilisant les méthodes traditionnelles de Vanilla JavaScript comme la boucle for et la boucle while ou en utilisant les méthodes plus récentes introduites par ES5, ES6 comme forEach, for ... of, for ... in , et de nombreuses autres méthodes en fonction de notre cas d’utilisation et de la vitesse/efficacité du code.

Utilisez la boucle for pour parcourir un tableau en JavaScript

La boucle traditionnelle for est similaire à la boucle for dans d’autres langages comme C++, Java, etc. Elle comporte 3 parties:

1. L’initialisation des variables/itératrices est exécutée avant l’exécution de la boucle for.
2. La condition à vérifier à chaque fois avant l’exécution de la boucle.
3. L’étape à effectuer à chaque fois après l’exécution de la boucle.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
for (var i = 0; i < length; i++) {
  console.log(arr[i]);
}

Production:

1
2
3
4
5
6

Nous prenons un itérateur i et bouclons le tableau en utilisant une boucle for qui incrémente i de 1 après chaque itération et le déplace vers l’élément next.

Utilisez la boucle while pour parcourir un tableau en JavaScript

La boucle while est très simple car elle a une condition qu’elle vérifie après chaque itération, et à moins que cette condition ne soit satisfaite, elle continue à s’exécuter.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

Comme la boucle for, nous prenons l’itérateur i et l’augmentons jusqu’à la longueur du tableau pour parcourir tous les éléments.

Utilisez la boucle do...while pour parcourir un tableau en JavaScript

La boucle do...while est la même que la boucle while sauf qu’elle est exécutée au moins une fois même si la condition de la boucle est fausse. Il faut donc être prudent lors de l’écriture de cette boucle.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
var i = 0;

do {
  console.log(arr[i]);
  i++;
} while (i < length);

Utilisez la boucle forEach pour parcourir un tableau en JavaScript

ES5 a introduit forEach comme une nouvelle façon d’itérer sur des tableaux. forEach prend une fonction comme argument et l’appelle pour chaque élément présent à l’intérieur du tableau.

const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => console.log(item));

Ici, nous avons écrit une fonction de flèche pour afficher l’argument passé dans la fonction et donné cette fonction à forEach pour parcourir le tableau et imprimer cet élément.

Utilisez for...of pour parcourir un tableau en JavaScript

ES6 a introduit le concept d’objets itérables et a fourni for ... of qui peut être utilisé pour itérer des objets Array.

let arr = [1, 2, 3, 4, 5, 6];
for (const item of arr) {
  console.log(item);
}

Nous l’utilisons comme une boucle normale mais itérons facilement un large éventail d’objets et pas seulement des tableaux.

Utilisez for...in pour parcourir un tableau en JavaScript

On peut itérer des tableaux en utilisant for ... in, mais ce n’est pas recommandé car il énumère les propriétés de l’objet. Il énumère même les méthodes attachées à Array.prototype en plus des éléments du tableau.

var arr = [1, 2, 3, 4, 5, 6];

for (var i in arr) {
  console.log(arr[i]);
}

Utilisez la méthode map pour parcourir un tableau en JavaScript

La méthode map boucle sur le tableau, utilise la fonction de rappel sur chaque élément, et retourne un nouveau tableau c’est-à-dire qu’elle prend en entrée un tableau et le mappe à un nouveau tableau avec les calculs effectués par la fonction de rappel.

arr = [1, 2, 3, 4, 5, 6];
const square = (x) => {
  return Math.pow(x, 2);
} mapped = arr.map(square);
console.log(arr);
console.log(mapped);

Ici, nous avons parcouru le tableau d’entrée et formé un tableau avec des carrés d’éléments à l’intérieur du tableau.

Utilisez la méthode reduce pour parcourir un tableau en JavaScript

La méthode reduce boucle sur le tableau et appelle la fonction reducer pour stocker la valeur du calcul du tableau par une fonction d’accumulateur. Un accumulateur est une variable mémorisée tout au long de toutes les itérations pour stocker les résultats accumulés de la boucle dans un tableau.

const arr = [1, 2, 3, 4];
const reducer = (accumulator, curr) => accumulator + curr;
console.log(arr.reduce(reducer));

Ici, nous bouclons sur le tableau et additionnons tous les éléments à l’intérieur d’un accumulateur.

Utilisez la méthode filter pour parcourir un tableau en JavaScript

Les méthodes filter parcourent le tableau et filtrent les éléments satisfaisant à une condition donnée.

const fruits =
    ['apple', 'orange', 'pomegranete', 'banana', 'pear', 'blueberry'];
const result = fruits.filter(word => word.length > 6);
console.log(result);

Ici, nous parcourons le tableau et vérifions si la longueur du nom du fruit donné est supérieure à 6. Si oui, nous l’incluons dans notre tableau de résultats, c’est-à-dire que nous filtrons les éléments requis.

Utilisez some pour parcourir un tableau en JavaScript

Il est utilisé pour parcourir le tableau et vérifier si une condition donnée est satisfaite par au moins un des éléments présents à l’intérieur du tableau.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.some(under_three));

Ici, nous utilisons some pour vérifier si un élément présent à l’intérieur du tableau est inférieur à 3. Il renvoie une valeur booléenne true ou false.

Utilisez every pour parcourir un tableau en JavaScript

Il est utilisé pour parcourir le tableau et vérifier si une condition donnée est satisfaite par tous les éléments à l’intérieur d’un tableau.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.every(under_three));

Ici, nous utilisons every pour vérifier si tous les éléments présents à l’intérieur du tableau sont inférieurs à 3 ou non. Il renvoie une valeur booléenne true ou false.