Comment filtrer plusieurs conditions en JavaScript

Pour ne conserver que les éléments qui remplissent plusieurs critères, utilisez filter() avec un prédicat qui ne renvoie une valeur vraie que si toutes les conditions sont satisfaites. Si les critères sont fournis à l’exécution, comparez chaque paire propriété-valeur demandée ; s’ils sont connus à l’avance, reliez les comparaisons avec &&. Dans les deux cas, filter() renvoie un nouveau tableau contenant les éléments correspondants.

Filtrer plusieurs conditions en JavaScript

La méthode filter() appelle sa fonction de rappel pour chaque élément du tableau auquel une valeur est attribuée et conserve l’élément si le résultat de cette fonction est une valeur truthy. Elle ne transforme pas l’élément en true ou false et ne modifie pas le tableau d’origine. La fonction de rappel reçoit l’élément courant, son index et le tableau ; la plupart des prédicats n’ont besoin que de l’élément. Le tableau renvoyé est nouveau, mais les objets qu’il contient sont les mêmes références que ceux du tableau source.

filter(callbackFn)

Ici, callbackFn est un prédicat : il évalue un élément et renvoie un résultat truthy ou falsy. Si aucun élément ne correspond, le tableau renvoyé est vide. Les emplacements non renseignés d’un tableau creux sont ignorés, car la fonction de rappel n’est pas appelée pour les index sans valeur attribuée. Consultez la documentation MDN de filter() pour connaître la signature complète de la fonction de rappel et le comportement détaillé.

Utiliser la méthode traditionnelle

Lorsque les critères proviennent d’un formulaire ou d’une autre source de données, stockez-les dans un objet et vérifiez chacune de ses entrées. Dans cet exemple, chaque clé demandée doit être une propriété propre de l’utilisateur et sa valeur doit correspondre exactement. Les critères fournis sélectionnent Aleena, car son nom et son adresse correspondent tous les deux.

const criteria = {
  address: 'India',
  name: 'Aleena'
};
const users = [
  {name: 'John Doe', email: 'johndoe@mail.com', age: 25, address: 'USA'},
  {name: 'Aleena', email: 'aleena@mail.com', age: 35, address: 'India'},
  {name: 'Mark Smith', email: 'marksmith@mail.com', age: 28, address: 'England'}
];

const filteredUsers = users.filter((user) => {
  return Object.entries(criteria).every(([key, value]) =>
    Object.prototype.hasOwnProperty.call(user, key) && user[key] === value
  );
});

console.log(filteredUsers);

[
  {
    name: 'Aleena',
    email: 'aleena@mail.com',
    age: 35,
    address: 'India'
  }
]

Object.entries(criteria) fournit les paires propriété-valeur, et every() exige que chacune d’elles soit valide. L’égalité stricte (===) impose que la valeur et le type correspondent ; une propriété absente ne correspond donc pas à la valeur demandée. Si l’objet de critères est vide, every() renvoie true pour chaque utilisateur et le résultat contient tous les utilisateurs. Cette approche s’adapte à n’importe quel ensemble de clés sans ajouter une comparaison distincte pour chaque champ.

La vérification de propriété propre empêche aussi une propriété héritée de satisfaire une clé demandée. Pour des données imbriquées, comparez explicitement la valeur imbriquée ou fournissez un prédicat adapté à ce champ ; ici, les comparaisons portent directement sur les valeurs de premier niveau.

Utiliser la méthode filter()

Si les conditions sont fixes et connues à l’avance, écrivez-les directement dans le prédicat et reliez-les avec l’opérateur logique ET (&&). Chaque comparaison doit être vraie pour que l’utilisateur soit conservé. Cet exemple complet utilise les mêmes données et renvoie le même utilisateur correspondant que la version dynamique.

const filter = {
  address: 'India',
  name: 'Aleena'
};
const users = [
  {name: 'John Doe', email: 'johndoe@mail.com', age: 25, address: 'USA'},
  {name: 'Aleena', email: 'aleena@mail.com', age: 35, address: 'India'},
  {name: 'Mark Smith', email: 'marksmith@mail.com', age: 28, address: 'England'}
];

const filteredUsers = users.filter(
  (user) => user.name === filter.name && user.address === filter.address
);

console.log(filteredUsers);

[
  {
    name: 'Aleena',
    email: 'aleena@mail.com',
    age: 35,
    address: 'India'
  }
]

Utilisez cette forme directe lorsque les champs et les comparaisons font partie de la logique du programme. Préférez la forme dynamique si l’ensemble des champs demandés peut varier. La démo JSFiddle d’origine est également disponible.

Le prédicat doit définir clairement les règles de sélection : renvoyez une valeur truthy pour conserver un élément et une valeur falsy pour l’écarter. Comme && applique l’évaluation à court-circuit, les comparaisons suivantes ne sont exécutées que si les précédentes réussissent. Vous pouvez placer en premier une vérification peu coûteuse qui écarte de nombreux éléments, à condition de garder les conditions faciles à comprendre.