javascript filter
JavaScript

Javascript filter: Comment utiliser filter, reduce et find sur les arrays?

Nous allons voir dans cet article les méthodes javascript filter, reduce et find. Ces méthodes permettent notamment de trier les tableaux et d’agir sur ces derniers. Ce qui était assez long avant ES6. A noter que ces méthodes sont disponibles uniquement depuis Ecmascript 6.

Un petit point, filter, reduce et find ne sont pas disponibles sur les vieux navigateurs. Qui utilise encore les vieilles versions d’IE?

Les méthodes filter, reduce et find fonctionnent sensiblement dans la même idée que map. Vous pouvez aller lire cet excellent article sur map vs foreach : http://pierreterrat.com/javascript-map-foreach

Filter()

En javascript, la méthode filter permet de filtrer un tableau/array. Ce filtre s’applique à partir d’une fonction qui renvoie true ou false. Prenons tout de suite un exemple de donnée :

let pokemons = [
  {
    id: 1,
    name: "Pikachu",
    type: "electrique",
  },
  {
    id: 2,
    name: "Carapuce",
    type: "eau",
  },
  {
    id: 3,
    name: "Tortank",
    type: "eau",
  },
  {
    id: 4,
    name: "Salameche",
    type: "feu",
  }]

Imaginons que nous voulions récupérer uniquement les pokemons de type eau. Nous allons utiliser la méthode filter et cette fonction va nous retourner un tableau correspondant au résultat de la fonction passée en paramètres :

let waterPokemon = pokemons.filter((pokemon) => pokemon.type === "eau");
/* [
  {
    id: 2,
    name: "Carapuce",
    type: "eau",
  },
  {
    id: 3,
    name: "Tortank",
    type: "eau",
  }]
*/

On utilise une fonction anonyme de la forme (pokemon) => pokemon.type === “eau” . Pour avoir le même résultat sans la fonction filter, nous aurions dû utiliser une boucle pour parcourir le tableau pokemons puis une condition if en plus.

Reduce()

Reduce permet de faire des opérations sur tout un tableau. fonctions très pratique surtout quand l’on traite des tableaux d’objets. Prenons des datas un peu différentes :

let pokemonsReduce = [
  {
    id: 1,
    name: "Pikachu",
    type: "electrique",
    puissance: 30
  },
  {
    id: 2,
    name: "Carapuce",
    type: "eau",
    puissance: 20
  },
  {
    id: 3,
    name: "Tortank",
    type: "eau",
    puissance: 250
  },
  {
    id: 4,
    name: "Salameche",
    type: "feu",
    puissance: 40
  }]

Nous souhaitons faire le total de la puissance des pokemons dans notre tableau. On peut utiliser la méthode reduce de cette manière :

var totalPuissance = pokemonsReduce.reduce(function (total, pokemon) {
  return total + pokemon.puissance;
}, 0);

// totalPuissance : 340

On additionne le total avec chaque puissance de pokemon (pokemon.puissance). Fonctionnalités ES6 extrêmement pratique et très utilisée.

Find()

La méthode find est quasiment similaire à la méthode filter. Elle permet de renvoyer un élément qui correspond à la fonction en paramètre. Find renvoie le premier élément correspondant, alors que filter va renvoyer un array des résultats correspondants (même si il n’y a qu’un seul résultat).

let carapuce = pokemons.find((pokemon) => pokemon.name === "Carapuce");
/*
  {
    id: 2,
    name: "Carapuce",
    type: "eau",
  }
*/

C’est une très bonne méthode pour effectuer des recherches dans des tableaux très rapidement. Pour moi c’est une des meilleurs fonctionnalités de ES6 (Ecmascript 6).

A noter qu’il y a aussi une méthode très pratique qui s’appelle sort, vous pouvez en savoir plus : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort

Si vous voulez aller plus loin dans votre apprentissage en javascript, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/javascript-:-le-guide-ultime-pour-bien-commencer-a-apprendre/

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *