Comment utiliser les méthodes de tableau en JavaScript: Méthodes d’itération

Introduction

En JavaScript, le type de données array consiste en une liste d’éléments. Il existe de nombreuses méthodes intégrées utiles disponibles pour les développeurs JavaScript pour travailler avec des tableaux. Les méthodes qui modifient le tableau d’origine sont appelées méthodes mutatrices, et les méthodes qui renvoient une nouvelle valeur ou une représentation sont appelées méthodes accessoires.

Il existe une troisième classe de méthodes de tableau, appelées méthodes d’itération, qui sont des méthodes qui agissent sur chaque élément d’un tableau, un à la fois. Ces méthodes sont étroitement associées aux boucles. Dans ce tutoriel, nous nous concentrerons sur les méthodes d’itération.

Pour tirer le meilleur parti de ce tutoriel, vous devriez avoir une certaine familiarité avec la création, l’indexation, la modification et la bouclage à travers les tableaux, que vous pouvez revoir dans le tutoriel Comprendre les tableaux en JavaScript.

Dans ce tutoriel, nous utiliserons des méthodes d’itération pour parcourir des tableaux, exécuter des fonctions sur chaque élément d’un tableau, filtrer les résultats souhaités d’un tableau, réduire les éléments du tableau à une seule valeur et rechercher à travers les tableaux pour trouver des valeurs ou des indices.

Comprendre les fonctions fléchées

De nombreux exemples tout au long de ce tutoriel utiliseront des expressions de fonction fléchée JavaScript, représentées par un signe égal suivi d’un signe supérieur à : =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // code à exécuter
}

example();

La dernière version de JavaScript au moment de la rédaction permet l’utilisation de fonctions fléchées, qui peuvent être écrites avec la syntaxe suivante :

var example = () => {
  // code à exécuter
}

example();

Les parenthèses dans l’un ou l’autre cas peuvent contenir des paramètres. Lorsqu’il n’y a qu’un seul paramètre, les parenthèses peuvent être omises, comme ceci :

var example = parameter1 => {
  // code à exécuter
}

Tout au long des exemples de ce tutoriel, nous utiliserons la syntaxe des fonctions fléchées. Pour en savoir plus sur les fonctions en JavaScript, consultez la référence des fonctions sur le site du Mozilla Developer Network.

forEach()

La méthode forEach() appelle une fonction pour chaque élément dans un tableau.

Commençons avec le tableau suivant assigné à la variable fish:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

Nous pouvons utiliser forEach() pour afficher chaque élément du tableau fish dans la console.

// Afficher chaque élément du tableau
fish.forEach(individualFish => {
	console.log(individualFish);
})

Une fois cela fait, nous recevrons la sortie suivante:

Output
piranha
barracuda
cod
eel

Une autre manière de le faire est d’utiliser la boucle for et de la tester par rapport à la propriété length du tableau.

// Parcourir la longueur du tableau
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

Le code ci-dessus produira la même sortie que l’utilisation de la méthode forEach(). En tant que méthode d’itération spécifiquement conçue pour être utilisée avec les tableaux, forEach() est plus concise et directe pour cette tâche particulière.

map()

La méthode map() crée un nouveau tableau avec les résultats d’un appel de fonction sur chaque élément du tableau.

Pour un exemple de comment utiliser la méthode d’itération map(), nous pouvons afficher chaque itération d’une boucle dans la console. map() ne modifie pas le tableau d’origine, mais retourne plutôt une nouvelle valeur de tableau.

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Imprimez chaque élément dans le tableau
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

Nous pouvons également utiliser map() pour changer les valeurs de chaque élément dans un tableau. Pour le démontrer, nous ajouterons un s à la fin de chaque élément dans le tableau fish pour pluraliser chaque mot.

// Pluralisez tous les éléments dans le tableau fish
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

La variable fish d’origine n’est pas modifiée, mais pluralFish contient maintenant une version modifiée de la variable d’origine.

filter()

La méthode filter() crée un nouveau tableau avec les éléments qui réussissent le résultat d’un test donné.

Nous pourrions utiliser filter() pour renvoyer un nouveau tableau ne contenant que les éléments d’une liste commençant par une lettre spécifique. Pour ce faire, nous pouvons utiliser l’indexation des chaînes pour appeler le premier élément (ou lettre) dans chaque élément de chaîne du tableau.

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Filtrer tous les éléments commençant par "s" dans une nouvelle liste
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

Nous avons testé quels éléments du tableau ont un s à l’index 0, et avons attribué le résultat à une nouvelle variable.

filter() est une méthode d’itération et ne modifie pas le tableau d’origine.

reduce()

La méthode reduce() réduira un tableau à une seule valeur.

Cela est couramment observé avec des nombres, tels que la recherche de la somme de tous les nombres dans un tableau.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Obtenir la somme de toutes les valeurs numériques
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce() peut également être utilisé avec des chaînes de caractères et d’autres types de données. La valeur renvoyée par reduce() peut être un nombre, une chaîne de caractères, un tableau ou un autre type de données. reduce() est une méthode d’itération qui ne modifie pas le tableau d’origine.

find()

La méthode find() renvoie la première valeur dans un tableau qui passe un test donné.

Par exemple, nous allons créer un tableau de créatures marines.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Ensuite, nous utiliserons la méthode find() pour tester si l’une des créatures du tableau est un céphalopode.

// Vérifier si une valeur donnée est un céphalopode
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

Étant donné que poulpe était la première entrée dans le tableau à satisfaire le test dans la fonction isCephalopod(), c’est la première valeur à être retournée.

La méthode find() peut vous aider à travailler avec des tableaux contenant de nombreuses valeurs.

findIndex()

La méthode findIndex() renvoie le premier indice dans un tableau qui passe un test donné.

Nous pouvons utiliser le même exemple seaCreatures que celui de la méthode find().

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

En utilisant le test isCephalopod, nous trouverons le numéro d’indice au lieu de la valeur de la première correspondance.

// Vérifier si une valeur donnée est un céphalopode
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

poulpe est le premier élément à correspondre au test et a un indice de 1, c’est donc le numéro d’indice qui est retourné.

Si le test n’est pas satisfait, findIndex() renverra -1.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

La méthode findIndex() est particulièrement utile lorsqu’on travaille avec des tableaux contenant de nombreux éléments.

Conclusion

Dans ce tutoriel, nous avons passé en revue les principales méthodes d’itération de tableaux intégrées en JavaScript. Les méthodes d’itération opèrent sur chaque élément d’un tableau et effectuent souvent une nouvelle fonction. Nous avons examiné comment parcourir des tableaux, modifier la valeur de chaque élément dans un tableau, filtrer et réduire des tableaux, et trouver des valeurs et des indices.

Pour revoir les bases des tableaux, lisez Comprendre les tableaux en JavaScript. Pour plus d’informations sur la syntaxe en JavaScript, consultez notre tutoriel sur « Comprendre la syntaxe et la structure du code en JavaScript ».