Itération de tableau JavaScript

L'itération de tableau est un concept fondamental de JavaScript qui permet aux développeurs de parcourir et de manipuler les éléments d'un tableau. JavaScript propose une variété de méthodes pour parcourir les tableaux, des boucles traditionnelles (while, do...while, for, for...in, for...of) aux méthodes de tableau modernes (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 la gestion des 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 plats à emporter:  JavaScript propose différentes méthodes d'itération de tableaux, notamment des boucles traditionnelles (while, do...while, for, for...in, for...of) et des méthodes de tableaux modernes (forEach, map, filter, reduce, reduceRight). Chaque méthode possède des caractéristiques uniques adaptées à différents cas d'utilisation, des itérations simples aux transformations complexes. La maîtrise de ces techniques permet aux développeurs d'écrire du code efficace et expressif pour manipuler des tableaux, essentiel pour créer des applications JavaScript puissantes. La plupart des méthodes sont prises en charge dans 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 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, chacune avec sa propre syntaxe et ses propres cas d'utilisation.

Comment parcourir un tableau avec une boucle While en JavaScript

La boucle while sur un tableau d'objets javascript exécute un bloc de code tant qu'une condition spécifiée est évaluée à true. Il s'agit d'une boucle polyvalente qui peut être utilisée pour parcourir 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 de nombres. La boucle imprime chaque élément sur 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 de tableau do...while 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 imprime chaque fruit sur 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 combine 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 imprime chaque couleur sur la console.

Comment parcourir 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 parcourt les indices du tableau persons. Elle affiche chaque index et sa valeur correspondante sur la console.

Comment parcourir un tableau avec une boucle for...of en JavaScript

La boucle for...of, introduite dans ECMAScript 2015 (ES6), fournit une manière plus concise et plus lisible d'itérer sur des objets itérables, y compris des tableaux. Elle accède directement aux valeurs du tableau sans avoir besoin d'une 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 de nombres et l'affecte à la variable nombre. 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 de tableau. 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 comme argument une fonction flèche, qui reçoit chaque fruit comme paramètre et l'imprime sur la console.

Autres méthodes d'itération de tableau

JavaScript fournit plusieurs autres méthodes d'itération de tableau qui offrent de puissantes fonctionnalités pour manipuler et transformer 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 passent le test implémenté par la fonction fournie.
• reduce() : exécute une fonction de réduction sur chaque élément du tableau, ce qui génère une valeur de sortie unique.
• every() : teste si tous les éléments du tableau passent le test implémenté par la fonction fournie.
• some() : teste si au moins un élément du tableau réussit le test implémenté par la fonction fournie.

Nous explorerons ces méthodes plus en détail dans les sections suivantes.

Tableau JavaScript 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 imprimer chaque nombre du tableau de nombres 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 pousser dans un nouveau tableau upperCaseFruits.

Tableau JavaScript 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 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 mettant au carré chaque nombre dans le 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.

Filtre de tableau JavaScript()

La méthode filter() crée un nouveau tableau avec tous les éléments qui passent 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 de nombres pour 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 pour inclure uniquement les personnes âgées de 18 ans ou plus.

Tableau JavaScript réduit()

La méthode reduce() exécute une fonction de réduction sur chaque élément du tableau, ce qui génère une valeur de sortie unique. Elle prend un accumulateur et l'élément actuel comme arguments et 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 de nombres. 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.

Tableau JavaScript 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 de nombres, en commençant par le 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 de mots en une seule phrase, en commençant par le dernier mot et en allant vers le premier mot.

Tableau JavaScript every()

La méthode every() teste si tous les éléments du tableau passent 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 de nombres 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 car toutes les personnes satisfont à la condition.

Tableau JavaScript some()

La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie true si la fonction renvoie true pour au moins un élément, et false 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 existe au moins un nombre pair dans le tableau de nombres. Elle renvoie true car le tableau contient des nombres pairs.

Méthodes avancées d'itération de tableau

JavaScript fournit des méthodes d'itération de tableau supplémentaires 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 des paires clé-valeur pour chaque index du tableau.
• with() : renvoie un nouveau tableau avec un élément spécifié remplacé par un nouvel élément. (Introduit dans ES2023)

Explorons ces méthodes plus en détail.

Tableau JavaScript flatMap()

La méthode flatMap() mappe d'abord chaque élément d'un tableau à l'aide d'une fonction de mappage, 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 de nombres à un tableau contenant le nombre et son double, puis aplatir les tableaux résultants en un seul tableau.

Support du navigateur

La méthode flatMap() est prise en charge dans les navigateurs modernes, notamment Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ et Opera 56+.

Tableau JavaScript à partir de()

La méthode Array.from() crée un nouveau tableau à partir d'un objet de type tableau ou itérable. Elle vous permet de convertir des objets qui ont une propriété de longueur et des éléments indexés en un tableau. Voici un exemple :

Exemple

tableau en 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 de type tableau en un tableau réel.

Support du navigateur

La méthode Array.from() est prise en charge dans les navigateurs modernes, notamment Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ et Opera 38+. Elle n'est pas prise en charge dans Internet Explorer.

Clés de tableau JavaScript()

La méthode keys() renvoie un nouvel objet Array Iterator qui contient les clés de chaque index du tableau. Elle vous permet d'effectuer une itération 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 fruits. La boucle for...of est ensuite utilisée pour parcourir les clés et les imprimer.

Support du navigateur

La méthode keys() est prise en charge dans les navigateurs modernes, notamment Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ et Opera 38+. Elle n'est pas prise en charge dans Internet Explorer.

Entrées de tableau JavaScript()

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, élément]. Voici un exemple :

Exemple

tableau en 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 ECMAScript 2023 (ES2023). Elle vous permet de créer un nouveau tableau avec un élément spécifié remplacé par un nouvel élément. Elle permet 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(numbers);
console.log(updatedNumbers);

Les
Dans cet exemple, la méthode with() est utilisée pour créer un nouveau tableau updatedNumbers où l'élément à l'index 2 est remplacé par la valeur 10. Le tableau de nombres d'origine reste inchangé.

Tableau JavaScript (...)

L'opérateur de propagation (...) vous permet de développer 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 = ['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.

Support du navigateur

L'opérateur de propagation est pris en charge dans les navigateurs modernes, notamment Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ et Opera 38+. Il n'est pas pris en charge dans Internet Explorer.

Récapitulation

JavaScript propose une large gamme de méthodes d'itération de tableau qui permettent aux développeurs de parcourir des tableaux 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, notamment des boucles traditionnelles comme while, do...while, for, for...in et for...of, ainsi que des méthodes de tableau modernes comme forEach(), map(), filter(), reduce(), every(), some(), et bien d'autres.

La compréhension et l'exploitation de ces techniques d'itération de tableau permettent aux développeurs d'écrire du code concis, efficace et expressif lorsqu'ils travaillent avec des tableaux pour chacun 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 de boucle de tableau JavaScript.

QFP

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 de tableau.

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

Utilisez map() lorsque vous souhaitez créer un nouveau tableau en transformant chaque élément d'un tableau existant. Utilisez forEach() lorsque vous souhaitez effectuer une action sur chaque élément d'un tableau sans créer de nouveau tableau.

Comment puis-je parcourir un tableau dans l’ordre inverse ?

Vous pouvez utiliser la méthode reverse() pour inverser l'ordre des éléments dans un tableau, puis parcourir le tableau inversé en utilisant l'une des méthodes d'itération décrites dans cet article.

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

Vous pouvez utiliser l'instruction break pour quitter prématurément un tableau de boucles en javascript. Lorsqu'elle se trouve à l'intérieur d'une boucle, break met immédiatement fin à la boucle et transfère le contrôle à l'instruction suivante après la boucle.