L’itération de tableaux est un concept fondamental en JavaScript qui permet aux développeurs de parcourir et de manipuler les éléments d’un tableau. JavaScript propose diverses méthodes pour itérer sur les tableaux, des boucles traditionnelles (while, do...while, for, for...in, for...of) aux méthodes modernes de tableau (forEach, map, filter, reduce, reduceRight). Chaque méthode répond à des besoins différents, tels que le filtrage, la transformation ou la réduction de données. Des méthodes avancées comme flatMap, Array.from, keys, entries et l’opérateur spread offrent davantage de flexibilité et de fonctionnalités. La maîtrise de ces techniques permet aux développeurs d’écrire un code concis, efficace et expressif pour gérer les tableaux, ce qui est essentiel à la création d’applications JavaScript robustes. Comprendre ces méthodes garantit également la compatibilité avec les navigateurs modernes, ce qui les rend pratiques pour le développement web actuel.
Points clés : JavaScript propose différentes méthodes d’itération de tableaux, notamment les boucles traditionnelles (while, do...while, for, for...in, for...of) et les méthodes modernes de tableau (forEach, map, filter, reduce, reduceRight). Chaque méthode possède des caractéristiques propres adaptées à différents cas d’usage, des itérations simples aux transformations complexes. La maîtrise de ces techniques permet aux développeurs d’écrire un code efficace et expressif pour manipuler des tableaux, ce qui est essentiel à la création d’applications JavaScript performantes. La plupart des méthodes sont prises en charge par les navigateurs modernes, assurant une large compatibilité.
Écrivez du code même si vous débutez avec l’assistant IA de Latenode
Que sont les boucles en JavaScript ?
Les boucles en JavaScript sont des structures de contrôle qui permettent aux développeurs d’exécuter de manière répétée un bloc de code jusqu’à ce qu’une condition spécifique soit remplie. Elles permettent d’automatiser les tâches répétitives et de traiter efficacement des tableaux ou des collections de données. JavaScript propose plusieurs types de boucles, notamment while, do...while, for, for...in et for...of, chacun ayant sa propre syntaxe et ses cas d’usage.
Comment parcourir un tableau avec une boucle while en JavaScript
La boucle while exécute un bloc de code tant qu’une condition spécifiée est évaluée à true. C’est une boucle polyvalente qui peut être utilisée pour itérer sur des tableaux en gérant manuellement la variable d’index. Voici un exemple d’utilisation d’une boucle while pour parcourir un tableau :
const numbers = [1, 2, 3, 4, 5];
let i = 0;
while (i < numbers.length) {
console.log(numbers[i]);
i++;
}
Dans cet exemple, la boucle while continue de s’exécuter tant que l’index i est inférieur à la longueur du tableau numbers. La boucle affiche chaque élément dans la console et incrémente la variable d’index.
Comment parcourir un tableau avec une boucle do...while en JavaScript
La boucle do...while est similaire à la boucle while, mais elle garantit que le bloc de code est exécuté au moins une fois avant de vérifier la condition. Voici un exemple d’utilisation d’une boucle do...while sur un tableau en JavaScript :
const fruits = ['apple', 'banana', 'orange'];
let i = 0;
do {
console.log(fruits[i]);
i++;
} while (i < fruits.length);
Dans ce cas, la boucle affiche chaque fruit dans la console et incrémente la variable d’index. La boucle continue jusqu’à ce que la condition i < fruits.length soit évaluée à false.
Comment parcourir un tableau avec une boucle for en JavaScript
La boucle for est une structure de boucle compacte et couramment utilisée en JavaScript. Elle rassemble les expressions d’initialisation, de condition et d’incrémentation/décrémentation sur une seule ligne. Voici un exemple d’utilisation d’une boucle for pour parcourir un tableau :
const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
La boucle for initialise la variable d’index i à 0, vérifie la condition i < colors.length et incrémente i après chaque itération. La boucle affiche chaque couleur dans la console.
Comment parcourir un tableau avec une boucle for...in en JavaScript
La boucle for...in est utilisée pour itérer sur les propriétés d’un objet. Lorsqu’elle est appliquée à des tableaux, elle parcourt les indices du tableau. Voici un exemple :
const persons = ['Alice', 'Bob', 'Charlie'];
for (let index in persons) {
console.log(index + ': ' + persons[index]);
}
Dans cet exemple, la boucle for...in parcourt les indices du tableau persons. Elle affiche chaque index et la valeur correspondante dans la console.
Comment parcourir un tableau avec une boucle for...of en JavaScript
La boucle for...of, introduite avec ECMAScript 2015 (ES6), offre une manière plus concise et plus lisible d’itérer sur des objets itérables, y compris les tableaux. Elle accède directement aux valeurs du tableau sans nécessiter de variable d’index. Voici un exemple :
javascript
const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
console.log(number);
}
Dans ce cas, la boucle for...of parcourt chaque élément du tableau numbers et l’assigne à la variable number. La boucle affiche chaque nombre dans la console.
Comment parcourir un tableau avec une boucle forEach en JavaScript
La méthode forEach() est une méthode de tableau intégrée qui exécute une fonction fournie une fois pour chaque élément du tableau. Elle offre une approche plus expressive et fonctionnelle de l’itération de tableaux. Voici un exemple :
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach((fruit) => {
console.log(fruit);
});
Dans cet exemple, la méthode forEach() est appelée sur le tableau fruits. Elle reçoit une fonction fléchée en argument, qui reçoit chaque fruit comme paramètre et l’affiche dans la console.
Autres méthodes d’itération de tableaux
JavaScript fournit plusieurs autres méthodes d’itération de tableaux qui offrent de puissantes capacités de manipulation et de transformation des tableaux. Ces méthodes incluent :
- map() : crée un nouveau tableau en appelant une fonction fournie sur chaque élément du tableau.
- filter() : crée un nouveau tableau avec tous les éléments qui réussissent le test implémenté par la fonction fournie.
- reduce() : exécute une fonction de réduction sur chaque élément du tableau, ce qui produit une valeur de sortie unique.
- every() : vérifie si tous les éléments du tableau réussissent le test implémenté par la fonction fournie.
- some() : vérifie si au moins un élément du tableau réussit le test implémenté par la fonction fournie.
Nous examinerons ces méthodes plus en détail dans les sections suivantes.
JavaScript Array forEach()
La méthode forEach() exécute une fonction fournie une fois pour chaque élément du tableau. Elle ne renvoie pas de nouveau tableau, mais vous permet d’effectuer une action sur chaque élément. Voici quelques exemples :
Exemple 1
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number);
});
Dans cet exemple, la méthode forEach() est utilisée pour afficher chaque nombre du tableau numbers dans la console.
Exemple 2
const fruits = ['apple', 'banana', 'orange'];
const upperCaseFruits = [];
fruits.forEach((fruit) => {
upperCaseFruits.push(fruit.toUpperCase());
});
console.log(upperCaseFruits);
Dans cet exemple, la méthode forEach() est utilisée pour convertir chaque fruit du tableau fruits en majuscules et l’ajouter à un nouveau tableau upperCaseFruits.
JavaScript Array map()
La méthode map() crée un nouveau tableau en appelant une fonction fournie sur chaque élément du tableau. Elle renvoie un nouveau tableau contenant les résultats de l’appel de fonction pour chaque élément. Voici quelques exemples :
Exemple 1
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => {
return number ** 2;
});
console.log(squaredNumbers);
Dans cet exemple, la méthode map() est utilisée pour créer un nouveau tableau squaredNumbers en élevant chaque nombre du tableau numbers au carré.
Exemple 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const names = persons.map((person) => {
return person.name;
});
console.log(names);
Dans cet exemple, la méthode map() est utilisée pour extraire la propriété name de chaque objet du tableau persons et créer un nouveau tableau names contenant uniquement les noms.
JavaScript Array filter()
La méthode filter() crée un nouveau tableau contenant tous les éléments qui réussissent le test implémenté par la fonction fournie. Elle renvoie un nouveau tableau contenant les éléments qui satisfont la condition. Voici quelques exemples :
Exemple 1
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0;
});
console.log(evenNumbers);
Dans cet exemple, la méthode filter() est utilisée pour créer un nouveau tableau evenNumbers en filtrant le tableau numbers afin d’inclure uniquement les nombres pairs.
Exemple 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const adultPersons = persons.filter((person) => {
return person.age >= 18;
});
console.log(adultPersons);
Dans cet exemple, la méthode filter() est utilisée pour créer un nouveau tableau adultPersons en filtrant le tableau persons afin d’inclure uniquement les personnes âgées de 18 ans ou plus.
JavaScript Array reduce()
La méthode reduce() exécute une fonction de réduction sur chaque élément du tableau, ce qui produit une valeur de sortie unique. Elle reçoit un accumulateur et l’élément actuel comme arguments, puis renvoie l’accumulateur pour l’itération suivante. Voici quelques exemples :
Exemple 1
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum);
Dans cet exemple, la méthode reduce() est utilisée pour calculer la somme de tous les nombres du tableau numbers. La valeur initiale de l’accumulateur est définie sur 0.
Exemple 2
const words = ['Hello', 'World', 'JavaScript'];
const sentence = words.reduce((accumulator, currentValue) => {
return accumulator + ' ' + currentValue;
});
console.log(sentence);
Dans cet exemple, la méthode reduce() est utilisée pour concaténer tous les mots du tableau words en une seule phrase. L’accumulateur est initialisé avec une chaîne vide.
Exemple 3
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const totalAge = persons.reduce((accumulator, person) => {
return accumulator + person.age;
}, 0);
console.log(totalAge);
Dans cet exemple, la méthode reduce() est utilisée pour calculer l’âge total de toutes les personnes du tableau persons. L’accumulateur est initialisé à 0.
JavaScript Array reduceRight()
La méthode reduceRight() est similaire à la méthode reduce(), mais elle exécute la fonction de réduction de droite à gauche, c’est-à-dire du dernier élément au premier. Voici quelques exemples :
Exemple 1
const numbers = [1, 2, 3, 4, 5];
const reversedSum = numbers.reduceRight((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(reversedSum);
Dans cet exemple, la méthode reduceRight() est utilisée pour calculer la somme de tous les nombres du tableau numbers, en commençant par le dernier élément et en allant vers le premier.
Exemple 2
const words = ['Hello', 'World', 'JavaScript'];
const reversedSentence = words.reduceRight((accumulator, currentValue) => {
return accumulator + ' ' + currentValue;
});
console.log(reversedSentence);
Dans cet exemple, la méthode reduceRight() est utilisée pour concaténer tous les mots du tableau words en une seule phrase, en commençant par le dernier mot et en allant vers le premier.
JavaScript Array every()
La méthode every() vérifie si tous les éléments du tableau réussissent le test implémenté par la fonction fournie. Elle renvoie true si la fonction renvoie true pour tous les éléments, et false dans le cas contraire. Voici quelques exemples :
Exemple 1
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((number) => {
return number % 2 === 0;
});
console.log(allEven);
Dans cet exemple, la méthode every() est utilisée pour vérifier si tous les nombres du tableau numbers sont pairs. Elle renvoie true puisque tous les nombres respectent la condition.
Exemple 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const allAdults = persons.every((person) => {
return person.age >= 18;
});
console.log(allAdults);
Dans cet exemple, la méthode every() est utilisée pour vérifier si toutes les personnes du tableau persons sont majeures (âge supérieur ou égal à 18 ans). Elle renvoie true puisque toutes les personnes respectent la condition.
JavaScript Array some()
La méthode some() vérifie si au moins un élément du tableau réussit le test implémenté par la fonction fournie. Elle renvoie true si la fonction renvoie true pour au moins un élément, et false dans le cas contraire. Voici un exemple :
Exemple
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => {
return number % 2 === 0;
});
console.log(hasEvenNumber);
Dans cet exemple, la méthode some() est utilisée pour vérifier s’il existe au moins un nombre pair dans le tableau numbers. Elle renvoie true puisque le tableau contient des nombres pairs.
Méthodes avancées d’itération de tableaux
JavaScript fournit des méthodes supplémentaires d’itération de tableaux qui offrent des fonctionnalités plus avancées. Ces méthodes incluent :
- flatMap() : crée un nouveau tableau en appliquant une fonction à chaque élément, puis en aplatissant le résultat.
- from() : crée un nouveau tableau à partir d’un objet de type tableau ou itérable.
- keys() : renvoie un nouvel objet Array Iterator qui contient les clés de chaque index du tableau.
- entries() : renvoie un nouvel objet Array Iterator qui contient les paires clé-valeur pour chaque index du tableau.
- with() : renvoie un nouveau tableau dans lequel un élément spécifié est remplacé par un nouvel élément. (Introduite dans ES2023)
Examinons ces méthodes plus en détail.
JavaScript Array flatMap()
La méthode flatMap() applique d’abord une fonction de mappage à chaque élément d’un tableau, puis aplatit le résultat dans un nouveau tableau. Elle combine les fonctionnalités de map() et flat() dans une seule méthode. Voici un exemple :
Exemple
const numbers = [1, 2, 3, 4, 5];
const mappedAndFlattened = numbers.flatMap((number) => {
return [number, number * 2];
});
console.log(mappedAndFlattened);
Dans cet exemple, la méthode flatMap() est utilisée pour mapper chaque nombre du tableau numbers vers un tableau contenant le nombre et son double, puis pour aplatir les tableaux obtenus en un seul tableau.
Compatibilité navigateur
La méthode flatMap() est prise en charge par les navigateurs modernes, notamment Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ et Opera 56+.
JavaScript Array from()
La méthode Array.from() crée un nouveau tableau à partir d’un objet de type tableau ou itérable. Elle permet de convertir en tableau des objets possédant une propriété length et des éléments indexés. Voici un exemple :
Exemple
Exemple de tableau en JavaScript :
const arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
const array = Array.from(arrayLike);
console.log(array);
Dans cet exemple, la méthode Array.from() est utilisée pour convertir un objet de type tableau en véritable tableau.
Compatibilité navigateur
La méthode Array.from() est prise en charge par les navigateurs modernes, notamment Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ et Opera 38+. Elle n’est pas prise en charge par Internet Explorer.
JavaScript Array keys()
La méthode keys() renvoie un nouvel objet Array Iterator qui contient les clés de chaque index du tableau. Elle permet d’itérer sur les indices du tableau. Voici un exemple :
Exemple
const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.keys();
for (const key of iterator) {
console.log(key);
}
Dans cet exemple, la méthode keys() est utilisée pour obtenir un itérateur contenant les clés (indices) du tableau fruits. La boucle for...of est ensuite utilisée pour parcourir les clés et les afficher.
Compatibilité navigateur
La méthode keys() est prise en charge par les navigateurs modernes, notamment Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ et Opera 38+. Elle n’est pas prise en charge par Internet Explorer.
JavaScript Array entries()
La méthode entries() renvoie un nouvel objet Array Iterator qui contient des paires clé-valeur pour chaque index du tableau. Chaque entrée est un tableau sous la forme [index, element]. Voici un exemple :
Exemple
Exemple de tableau en JavaScript :
const fruits = ['apple ', 'banana', 'orange']; const iterator = fruits.entries();
for (const [index, element] of iterator) { console.log(${index}: ${element}); }
Dans cet exemple, la méthode entries() est utilisée pour obtenir un itérateur contenant des paires clé-valeur pour chaque index du tableau fruits. La boucle for...of est ensuite utilisée pour déstructurer chaque entrée en variables index et element, puis les afficher.
Méthode JavaScript Array with()
La méthode with() est un nouvel ajout introduit dans ECMAScript 2023 (ES2023). Elle vous permet de créer un nouveau tableau dans lequel un élément spécifié est remplacé par un nouvel élément. Elle permet de mettre à jour un élément d’un tableau sans modifier le tableau d’origine. Voici un exemple :
Exemple
const numbers = [1, 2, 3, 4, 5];
const updatedNumbers = numbers.with(2, 10);
console.log(numbers);
console.log(updatedNumbers);
Dans cet exemple, la méthode with() est utilisée pour créer un nouveau tableau updatedNumbers dans lequel l’élément à l’index 2 est remplacé par la valeur 10. Le tableau numbers d’origine reste inchangé.
JavaScript Array Spread (...)
L’opérateur spread (...) vous permet de développer un tableau en éléments individuels. Il peut être utilisé pour concaténer des tableaux, transmettre des tableaux comme arguments à des fonctions ou créer de nouveaux tableaux à partir d’éléments existants. Voici un exemple :
Exemple
const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits);
Dans cet exemple, l’opérateur spread est utilisé pour concaténer les tableaux fruits et moreFruits dans un nouveau tableau allFruits.
Compatibilité navigateur
L’opérateur spread est pris en charge par les navigateurs modernes, notamment Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ et Opera 38+. Il n’est pas pris en charge par Internet Explorer.
Conclusion
JavaScript propose un large éventail de méthodes d’itération de tableaux qui permettent aux développeurs de parcourir des tableaux, de manipuler leurs éléments et de créer de nouveaux tableaux selon des conditions spécifiques. Dans cet article, nous avons exploré diverses méthodes, notamment les boucles traditionnelles comme while, do...while, for, for...in et for...of, ainsi que les méthodes modernes de tableau telles que forEach(), map(), filter(), reduce(), every(), some() et bien d’autres.
Comprendre et exploiter ces techniques d’itération de tableaux permet aux développeurs d’écrire un code concis, efficace et expressif lorsqu’ils travaillent avec des tableaux en JavaScript. En maîtrisant ces méthodes, vous pouvez effectuer facilement des opérations complexes sur des tableaux et créer de puissantes applications JavaScript utilisant des boucles sur les tableaux.
Écrivez du code même si vous débutez avec l’assistant IA de Latenode
