L'itération des tableaux en JavaScript

L'itération sur les tableaux est un concept fondamental de JavaScript qui permet aux développeurs de parcourir en boucle et de manipuler les éléments d'un tableau. JavaScript fournit une variété de méthodes pour itérer sur les tableaux, des boucles traditionnelles (while, do...while, for, for...in, for...of) aux méthodes modernes pour les tableaux (forEach, map, filter, reduce, reduceRight). Chaque méthode est adaptée à différentes tâches, telles que le filtrage, la transformation ou la réduction des données. Les méthodes avancées telles que flatMap, Array.from, keys, entries et l'opérateur spread offrent une flexibilité et des fonctionnalités supplémentaires. La maîtrise de ces techniques permet aux développeurs d'écrire un code concis, efficace et expressif pour manipuler les tableaux, ce qui est essentiel pour créer des applications JavaScript robustes. La compréhension de ces méthodes garantit également la compatibilité avec les navigateurs modernes, ce qui les rend pratiques pour le développement web contemporain.

Principaux enseignements : JavaScript propose différentes méthodes pour l'itération des tableaux, notamment les boucles traditionnelles (while, do...while, for, for...in, for...of) et les méthodes modernes pour les tableaux (forEach, map, filter, reduce, reduceRight). Chaque méthode possède des caractéristiques uniques adaptées à différents cas d'utilisation, des simples itérations aux transformations complexes. La maîtrise de ces techniques permet aux développeurs d'écrire un code efficace et expressif pour manipuler les tableaux, ce qui est essentiel pour construire des applications JavaScript puissantes. La plupart des méthodes sont prises en charge par les navigateurs modernes, ce qui garantit une large compatibilité.

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 façon 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, chacune ayant sa propre syntaxe et ses propres cas d'utilisation.

Comment parcourir un tableau avec une boucle While en JavaScript ?

La boucle while à travers un tableau d'objets javascript exécute un bloc de code tant qu'une condition spécifiée est évaluée comme vraie. Il s'agit d'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'indice i est inférieur à la longueur du tableau de nombres. La boucle imprime chaque élément sur la console et incrémente la variable index.

Comment boucler 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 de tableau do...while en javascript :

const fruits = ['apple', 'banana', 'orange'];
let i = 0;

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

In this case, the loop prints each fruit to the console and increments the index variable. The loop continues until the condition i < fruits.length evaluates to 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 combine les expressions d'initialisation, de condition et d'incrémentation/décrémentation en une seule ligne. Voici un exemple d'utilisation d'une boucle for pour itérer sur un tableau :

const colors = ['red', 'green', 'blue'];

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

The for loop initializes the index variable i to 0, checks the condition i < colors.length, and increments i after each iteration. The loop prints each color to the console.

Comment faire une boucle dans un tableau avec une boucle for...in en JavaScript

La boucle for...in est utilisée pour parcourir les propriétés d'un objet. Lorsqu'elle est utilisée avec 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 itère sur les indices du tableau des personnes. Elle imprime chaque indice et sa valeur correspondante sur la console.

Comment faire une boucle dans un tableau avec un for...of Loop en JavaScript

La boucle for...of, introduite dans ECMAScript 2015 (ES6), offre un moyen plus concis et plus lisible d'itérer sur des objets itérables, y compris des 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 itère sur chaque élément du tableau des nombres et l'affecte à la variable number. La boucle imprime chaque nombre sur 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 des 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 prend en argument une fonction arrow, qui reçoit chaque fruit en paramètre et l'imprime sur la console.

Autres méthodes d'itération des tableaux

JavaScript propose plusieurs autres méthodes d'itération de tableaux qui offrent de puissantes possibilités de manipulation et de transformation des tableaux. Ces méthodes comprennent :

• 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 passent le test mis en œuvre par la fonction fournie.
• reduce() : Exécute une fonction de réduction sur chaque élément du tableau, ce qui donne une seule valeur de sortie.
• every() : Teste si tous les éléments du tableau passent le test mis en œuvre par la fonction fournie.
• some() : Teste si au moins un élément du tableau passe le test mis en œuvre par la fonction fournie.

Nous allons explorer 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 un nouveau tableau mais te 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 imprimer chaque nombre du tableau numbers sur 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 le placer dans 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 avec les résultats de l'appel de la 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 au carré chaque nombre du tableau numbers.

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 avec tous les éléments qui passent le test mis en œuvre 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 pour n'inclure que 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 pour n'inclure que 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 donne une seule valeur de sortie. Elle prend un accumulateur et l'élément actuel comme arguments et renvoie l'accumulateur pour la prochaine itération. 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 fixée à 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 (du dernier élément au premier élément). 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 partant du dernier élément et en allant vers le premier élément.

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 mot.

JavaScript Array every()

La méthode every() vérifie si tous les éléments du tableau passent le test mis en œuvre par la fonction fournie. Elle renvoie vrai si la fonction renvoie vrai pour tous les éléments, et faux 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 satisfont à 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 des adultes (âge supérieur ou égal à 18 ans). Elle renvoie true puisque toutes les personnes remplissent la condition.

JavaScript Array some()

La méthode some() teste si au moins un élément du tableau passe le test mis en œuvre par la fonction fournie. Elle renvoie vrai si la fonction renvoie vrai pour au moins un élément, et faux sinon. 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 y a 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 des réseaux

JavaScript propose des méthodes d'itération de tableau supplémentaires qui offrent des fonctionnalités plus avancées. Ces méthodes comprennent :

• 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 Iterator de tableau qui contient les clés pour chaque index du tableau.
• entries() : Renvoie un nouvel objet Iterator de tableau qui contient des paires clé-valeur pour chaque index du tableau.
• avec() : Renvoie un nouveau tableau dont l'élément spécifié est remplacé par un nouvel élément. (Introduit dans ES2023)

Explorons ces méthodes plus en détail.

JavaScript Array flatMap()

La méthode flatMap() met d'abord en correspondance chaque élément d'un tableau à l'aide d'une fonction de mise en correspondance, puis aplatit le résultat dans un nouveau tableau. Elle combine les fonctionnalités de map() et de flat() en 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 faire correspondre chaque nombre du tableau numbers à un tableau contenant le nombre et son double, puis pour aplatir les tableaux résultants en un seul tableau.

Prise en charge des navigateurs

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 te permet de convertir en tableau des objets qui ont une propriété de longueur et des éléments indexés. Voici un exemple :

Exemple

dans un exemple 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 ressemblant à un tableau en un véritable tableau.

Prise en charge des navigateurs

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 indice du tableau. Elle te 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 qui contient les clés (indices) du tableau de fruits. La boucle for...of est ensuite utilisée pour itérer sur les clés et les imprimer.

Prise en charge des navigateurs

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 Iterator de tableau qui contient des paires clé-valeur pour chaque index du tableau. Chaque entrée est un tableau de la forme [index, élément]. Voici un exemple :

Exemple

dans un exemple 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 qui contient 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` et les imprimer.

Méthode JavaScript Array with()

La méthode `with()` est un nouvel ajout introduit dans l'ECMAScript 2023 (ES2023). Elle permet de créer un nouveau tableau dont l'élément spécifié est remplacé par un nouvel élément. Elle offre un moyen de mettre à jour un élément dans un tableau sans muter le tableau d'origine. Voici un exemple :

Exemple

const numbers = [1, 2, 3, 4, 5] ;
const updatedNumbers = numbers.with(2, 10) ;

console.log(nombres) ;
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'indice 2 est remplacé par la valeur 10. Le tableau de nombres d'origine reste inchangé.

JavaScript Array Spread (...)

L'opérateur d'étalement (...) te permet d'étendre un tableau en éléments individuels. Il peut être utilisé pour concaténer des tableaux, passer des tableaux comme arguments à des fonctions ou créer de nouveaux tableaux avec des éléments existants. Voici un exemple :

Exemple

const fruits = ['pomme', 'banane'] ;
const moreFruits = ['orange', 'raisin'] ;
const allFruits = [...fruits, ...moreFruits] ;

console.log(allFruits) ;

Dans cet exemple, l'opérateur spread est utilisé pour concaténer les tableaux fruits et moreFruits en un nouveau tableau allFruits.

Prise en charge des navigateurs

L'opérateur d'étalement 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.

Pour conclure

JavaScript propose un large éventail de méthodes d'itération de tableaux qui permettent aux développeurs de javascript boucler à travers un tableau javascript, de manipuler des éléments et de créer de nouveaux tableaux en fonction de conditions spécifiques. Dans cet article, nous avons exploré diverses méthodes, y compris les boucles traditionnelles comme while, do...while, for, for...in, et for...of, ainsi que les méthodes modernes de tableau comme forEach(), map(), filter(), reduce(), every(), some(), et bien d'autres encore.

La compréhension et l'exploitation de ces techniques d'itération de tableaux permettent aux développeurs d'écrire un code concis, efficace et expressif lorsqu'ils travaillent avec des tableaux pour chacun en javascript. En maîtrisant ces méthodes, tu peux effectuer des opérations complexes sur les tableaux avec facilité et construire de puissantes applications JavaScript de boucle de tableau.

FAQ

Quelle est la différence entre les boucles for...of et for...in ?

La boucle for...of est utilisée pour parcourir les valeurs d'un objet itérable, tel qu'un tableau, tandis que la boucle for...in est utilisée pour parcourir les propriétés énumérables d'un objet, y compris les indices d'un tableau.

Quand dois-je utiliser map() au lieu de forEach() ?

Utilise map() pour créer un nouveau tableau en transformant chaque élément d'un tableau existant. Utilise forEach() lorsque tu veux effectuer une action sur chaque élément d'un tableau sans créer un nouveau tableau.

Comment itérer sur un tableau dans l'ordre inverse ?

Tu peux utiliser la méthode reverse() pour inverser l'ordre des éléments d'un tableau, puis itérer sur le tableau inversé à l'aide de l'une des méthodes d'itération abordées dans cet article.

Comment puis-je sortir prématurément d'une boucle ?

Tu peux utiliser l'instruction break pour sortir prématurément d'un tableau de boucle en javascript. Lorsqu'elle est rencontrée à l'intérieur d'une boucle, l'instruction break met immédiatement fin à la boucle et transfère le contrôle à l'instruction qui suit la boucle.