Comment utiliser les méthodes de tableaux 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 permettant aux développeurs JavaScript de travailler avec des tableaux. Les méthodes qui modifient le tableau d’origine sont appelées méthodes mutator et renvoyer une nouvelle valeur ou représentation sont appelées méthodes accessor.

Il existe une troisième classe de méthodes de tableau, appelées méthodes * itération *, 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 allons nous concentrer sur les méthodes d’itération.

Pour tirer le meilleur parti de ce didacticiel, vous devez vous familiariser avec la création, l’indexation, la modification et la mise en boucle de tableaux, que vous pouvez consulter dans le didacticiel https://www.digitalocean.com/community/tutorials/understanding. -rarays-in-javascript [Comprendre les tableaux en JavaScript].

Dans ce didacticiel, 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 valeur unique et rechercher dans des tableaux des valeurs ou des index.

Comprendre les fonctions des flèches

De nombreux exemples tout au long de ce didacticiel utiliseront JavaScript arrow expressions expressions, représentés par un signe égal suivi d’un plus grand que signe: + ⇒ +.

Une * fonction * est un bloc de code réutilisable pouvant être exécuté. Traditionnellement, une fonction peut être écrite avec la syntaxe suivante:

var example = function() {
 // code to execute
}

example();

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

var example = () => {
 // code to execute
}

example();

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

var example = parameter1 => {
 // code to execute
}

Tout au long des exemples de ce didacticiel, nous allons utiliser la syntaxe de la fonction flèche. Pour en savoir plus sur les fonctions en JavaScript, lisez la référence à Functions sur le réseau de développeurs Mozilla.

pour chaque()

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

Commençons par le tableau suivant affecté à la variable + poisson +:

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

Nous pouvons utiliser + forEach () + pour imprimer chaque élément du tableau + fish + sur la console.

// Print out each item in the array
fish.forEach(individualFish => {
   console.log(individualFish);
})

Une fois que nous le faisons, nous recevrons le résultat suivant:

Outputpiranha
barracuda
cod
eel

Une autre façon de faire consiste à utiliser le mot clé https://www.digitalocean.com/community/tutorials/how-to-construct-for-loops-in-javascript [+ for + loop] et à le tester à l’aide de la propriété length du tableau.

// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
   console.log(fish[i]);
}

Le code ci-dessus aura le même résultat qu’en utilisant la méthode + forEach () +. En tant que méthode d’itération spécifiquement destinée à être utilisée avec des tableaux, + forEach () + est plus concis et simple pour cette tâche particulière.

carte()

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 d’utilisation de la méthode d’itération + map () +, nous pouvons imprimer chaque itération d’une boucle sur la console. + map () + ne modifie pas le tableau d’origine, mais renvoie une nouvelle valeur de tableau. Contrairement à + forEach () +, la méthode + map () + doit être affectée à une nouvelle variable.

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

// Print out each item in the array
let printFish = fish.map(individualFish => {
   console.log(individualFish);
});

printFish;

Outputpiranha
barracuda
cod
eel

Nous pouvons aussi utiliser + map () + pour changer les valeurs de chaque élément d’un tableau. Pour illustrer cela, nous allons ajouter un + s + à la fin de chaque élément du tableau + poisson + afin de pluraliser chaque mot.

// Pluralize all items in the fish array
let pluralFish = fish.map(individualFish => {
   return `${individualFish}s`;
});

pluralFish;

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

La variable originale "+ fish " est inchangée, mais " pluralFish +" contient maintenant une version modifiée de la variable originale.

filtre()

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

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

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

// Filter all creatures that start with "s" into a new list
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 affecté le résultat à une nouvelle variable.

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

réduire()

La méthode + reduction () + réduira un tableau à une valeur unique.

Cela se voit couramment avec des nombres, tels que trouver la somme de tous les nombres d’un tableau.

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

// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
   return a + b;
});

sum;

Output108

+ reduction () + peut également être utilisé avec strings et d’autres https: //www.digitalocean. com / communauté / tutoriels / Comprendre les types de données en javascript [types de données]. La valeur renvoyée par + reduction () + peut être un nombre, une chaîne, un tableau ou un autre type de données. + reduction () + est une méthode d’itération qui ne modifie pas le tableau d’origine.

trouver()

La méthode + find () + renvoie la première valeur d’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" ];

Nous utiliserons ensuite la méthode + find () + pour vérifier si l’une des créatures du tableau est constituée de céphalopodes.

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
   return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Outputoctopus

Puisque + octopus + était la première entrée du tableau à satisfaire le test de la fonction + isCephalopod () +, il s’agit de la première valeur à retourner.

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

findIndex ()

La méthode + findIndex () + renvoie le premier index d’un tableau qui passe un test donné.

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

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

En utilisant le test + isCephalopod +, nous allons trouver le numéro d’index au lieu de la valeur de la première correspondance.

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
   return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output1

+ octopus + est le premier élément à correspondre au test et a un index de + 1 +, c’est donc le numéro d’index qui est renvoyé.

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

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

seaCreatures.findIndex

Output-1

La méthode + findIndex () + est particulièrement utile lorsque vous travaillez avec des tableaux contenant de nombreux éléments.

Conclusion

Dans ce didacticiel, nous avons examiné les principales méthodes de tableau d’itérations intégrées en JavaScript. Les méthodes d’itération opèrent sur chaque élément d’un tableau et remplissent souvent une nouvelle fonction. Nous avons expliqué comment passer en revue les tableaux, modifier la valeur de chaque élément d’un tableau, filtrer et réduire les tableaux et rechercher des valeurs et des index.

Pour consulter les bases des tableaux, lisez Comprendre les tableaux en JavaScript. Pour plus d’informations sur la syntaxe en Javascript, consultez notre didacticiel à l’adresse «Comprendre la syntaxe et la structure de code en JavaScript».

TOC