Comment utiliser la méthode de tableau filter() en JavaScript

Introduction

La méthode de tableau filter() crée un nouveau tableau avec des éléments qui répondent à un critère donné à partir d'un tableau existant.

Dans cet article, vous apprendrez à propos de la méthode de tableau filter().

Prérequis

Si vous souhaitez suivre cet article, vous aurez besoin de :

• Une certaine familiarité avec les tableaux JavaScript.
• Une certaine familiarité avec les fonctions JavaScript.

Utilisation de filter() sur un tableau de nombres

La syntaxe de filter() ressemble à :

var newArray = array.filter(function(item) {
  return condition;
});

L'argument item est une référence à l'élément actuel dans le tableau pendant que filter() le vérifie par rapport à la condition. Cela est utile pour accéder aux propriétés, dans le cas des objets.

Si l'item actuel satisfait la condition, il est renvoyé dans le nouveau tableau.

Considérez cet exemple de tableau de nombres :

var numbers = [1, 3, 6, 8, 11];

Appliquez ensuite un filter() pour renvoyer tous les nombres supérieurs à 7 :

var greaterThanSeven = numbers.filter(function(number) {
  return number > 7;
});

console.log(greaterThanSeven);

Ce code générera un nouveau tableau filtré :

output
[8, 11]

Un tableau avec deux valeurs supérieures à 7 est retourné.

Utilisation de filter() sur un tableau d'objets

Un cas d'utilisation courant de filter() est avec un tableau d'objets à travers leurs propriétés.

Considérez cet exemple de tableau d'objets creature :

var creatures = [
  {name: "Shark", habitat: "Ocean"},
  {name: "Whale", habitat: "Ocean"},
  {name: "Lion", habitat: "Savanna"},
  {name: "Monkey", habitat: "Jungle"}
];

Ensuite, appliquez un filter() pour renvoyer toutes les créatures dont le habitat est égal à Océan :

var aquaticCreatures =  creatures.filter(function(creature) {
  return creature.habitat == "Ocean";
});

console.log(aquaticCreatures);

Ce code générera un nouveau tableau filtré :

[ {name: "Shark", habitat: "Ocean"}, {name: "Whale", habitat: "Ocean"} ]

Un tableau avec les deux créatures qui ont un habitat dans l'« Océan » est retourné.

Conclusion

Dans cet article, vous avez appris la méthode Array filter().

Pour plus de détails, consultez la référence MDN sur filter().

Filter n'est qu'une des plusieurs méthodes d'itération sur les tableaux en JavaScript, lisez Comment utiliser les méthodes d'itération de tableau en JavaScript pour en savoir plus sur les autres méthodes comme map() et reduce().