Filtrer plusieurs conditions en JavaScript

1. Filtrer plusieurs conditions en JavaScript
2. Utiliser la méthode traditionnelle
3. Utilisez la méthode Filter

L’article d’aujourd’hui nous apprend à filtrer un tableau avec plusieurs conditions en utilisant les méthodes traditionnelles et filter en JavaScript.

Filtrer plusieurs conditions en JavaScript

Les tableaux sont un type d’objet JavaScript avec une clé numérique fixe et des valeurs dynamiques. JavaScript fournit plusieurs méthodes intégrées pour accéder à ces éléments de tableau et les manipuler.

La méthode filter() génère un nouveau tableau à partir du tableau d’origine avec tous les éléments qui passent la condition/le test implémenté par la fonction fournie.

Syntaxe:

filter(callbackFn)

La méthode filter accepte callbackFn en paramètre. Cette fonction est un prédicat pour tester chaque élément du tableau.

Retourne un nouveau tableau qui force l’élément à rester true ou false dans le cas contraire.

La fonction de rappel est appelée avec les trois arguments.

1. Un element est l’élément courant traité dans le tableau.
2. Le index est l’index de l’élément en cours de traitement dans le tableau.
3. Le array sur lequel filter() a été appelé.

Un nouveau tableau est retourné, contenant les éléments qui réussissent le test. Un tableau vide sera renvoyé si aucun élément ne réussit le test.

filter() appelle une fonction callbackFn fournie une fois pour chaque élément d’un tableau et construit un nouveau tableau de toutes les valeurs pour lesquelles callbackFn renvoie une valeur qui force true.

callbackFn n’est appelé que pour les index de tableau ayant des valeurs assignées. Il n’est pas appelé pour les index qui ont été supprimés ou qui n’ont jamais été affectés.

Les éléments du tableau qui échouent au test callbackFn sont ignorés et ne sont pas inclus dans le nouveau tableau. Retrouvez plus d’informations dans la documentation du filter().

Utiliser la méthode traditionnelle

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((item) => {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key]) return false;
  }
  return true;
});

console.log(filteredUsers);

Nous avons décrit un objet filter avec les propriétés souhaitées dans l’exemple ci-dessus. Nous avons défini la fonction de rappel dans la méthode filter pour vérifier si les propriétés souhaitées sont présentes dans le tableau spécifié.

Si les propriétés souhaitées ne sont pas présentes, false est renvoyé ; sinon, true est renvoyé.

Cette approche est utile lorsque l’objet filter est généré dynamiquement. Si l’objet filter est statique, vous pouvez filtrer les objets en utilisant la condition && ci-dessous.

Essayez d’exécuter l’extrait de code ci-dessus dans n’importe quel navigateur prenant en charge JavaScript ; il affichera le résultat ci-dessous.

Utilisez la méthode Filter

const filteredUsers = users.filter(
    obj => obj.name == filter.name && obj.address == filter.address);
console.log(filteredUsers);

Production:

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

Démo