Mappage, réduction et filtrage JavaScript - Fonctions de tableau JS expliquées avec des exemples de code

Mapper, réduire et filtrer sont toutes des méthodes de tableau en JavaScript. Chacun effectuera une itération sur un tableau et effectuera une transformation ou un calcul. Chacun renverra un nouveau tableau basé sur le résultat de la fonction. Dans cet article, vous apprendrez pourquoi et comment utiliser chacun d'eux.

Voici un résumé amusant de Steven Luscher:

Cartographier / filtrer / réduire dans un tweet:

carte ([?,?,?], cuisinier)

=> [?,?,?]

filtre ([?,?,?], est végétarien)

=> [?,?]

réduire ([?,?], manger)

=>?

- Steven Luscher (@steveluscher) 10 juin 2016

Carte

La map()méthode est utilisée pour créer un nouveau tableau à partir d'un tableau existant, en appliquant une fonction à chacun des éléments du premier tableau.

Syntaxe

var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])

Dans le rappel, seul le tableau elementest requis. Une action est généralement effectuée sur la valeur, puis une nouvelle valeur est renvoyée.

Exemple

Dans l'exemple suivant, chaque nombre d'un tableau est doublé.

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]

Filtre

La filter()méthode prend chaque élément dans un tableau et lui applique une instruction conditionnelle. Si cette condition renvoie true, l'élément est poussé vers le tableau de sortie. Si la condition renvoie false, l'élément n'est pas poussé vers le tableau de sortie.

Syntaxe

var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])

La syntaxe de filterest similaire à map, sauf que la fonction de rappel doit retourner truepour conserver l'élément, ou falseautrement. Dans le rappel, seul le elementest requis.

Exemples

Dans l'exemple suivant, les nombres impairs sont "filtrés", ne laissant que les nombres pairs.

const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]

Dans l'exemple suivant, filter()est utilisé pour obtenir tous les élèves dont les notes sont supérieures ou égales à 90.

const students = [ { name: 'Quincy', grade: 96 }, { name: 'Jason', grade: 84 }, { name: 'Alexis', grade: 100 }, { name: 'Sam', grade: 65 }, { name: 'Katie', grade: 90 } ]; const studentGrades = students.filter(student => student.grade >= 90); return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Réduire

La reduce()méthode réduit un tableau de valeurs à une seule valeur. Pour obtenir la valeur de sortie, il exécute une fonction de réduction sur chaque élément du tableau.

Syntaxe

arr.reduce(callback[, initialValue])

L' callbackargument est une fonction qui sera appelée une fois pour chaque élément du tableau. Cette fonction prend quatre arguments, mais souvent seuls les deux premiers sont utilisés.

  • accumulateur - la valeur renvoyée de l'itération précédente
  • currentValue - l'élément actuel dans le tableau
  • index - l'index de l'élément actuel
  • array - le tableau d'origine sur lequel réduire a été appelé
  • L' initialValueargument est facultatif. S'il est fourni, il sera utilisé comme valeur initiale de l'accumulateur lors du premier appel à la fonction de rappel.

Exemples

L'exemple suivant ajoute chaque nombre ensemble dans un tableau de nombres.

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10

Dans l'exemple suivant, reduce()est utilisé pour transformer un tableau de chaînes en un seul objet qui montre combien de fois chaque chaîne apparaît dans le tableau. Notez que cet appel à réduire passe un objet vide {}comme initialValueparamètre. Cela sera utilisé comme valeur initiale de l'accumulateur (le premier argument) passé à la fonction de rappel.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit']; var petCounts = pets.reduce(function(obj, pet){ if (!obj[pet]) { obj[pet] = 1; } else { obj[pet]++; } return obj; }, {}); console.log(petCounts); /* Output: { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Explication vidéo

Regardez la vidéo ci-dessous sur la chaîne YouTube freeCodeCamp.org. Il couvre les méthodes de tableau discutées, ainsi que quelques autres.