Mehrere Bedingungen in JavaScript filtern

Verwende die JavaScript-Methode filter() mit einem Prädikat, das nur dann true zurückgibt, wenn ein Element alle erforderlichen Bedingungen erfüllt. Bei Kriterien, die erst zur Laufzeit feststehen, vergleichst du jedes angeforderte Eigenschaft-Wert-Paar. Sind die Kriterien bekannt, verknüpfst du die Vergleiche mit &&. In beiden Fällen gibt filter() ein neues Array mit den passenden Elementen zurück.

Mehrere Bedingungen in JavaScript filtern

Die Methode filter() ruft ihren Callback für jedes belegte Array-Element auf und übernimmt ein Element, wenn das Ergebnis des Callbacks truthy ist. Sie ändert das Element nicht in true oder false und lässt das ursprüngliche Array unverändert. Der Callback erhält das aktuelle Element, seinen Index und das Array; für die meisten Prädikate genügt das Element. Das zurückgegebene Array ist neu, seine passenden Objekte sind jedoch dieselben Objektreferenzen wie im ursprünglichen Array.

filter(callbackFn)

callbackFn ist hier ein Prädikat: Es prüft ein Element und gibt ein truthy oder falsy Ergebnis zurück. Wenn kein Element passt, enthält das zurückgegebene Array keine Elemente. Nicht belegte Positionen in einem dünn besetzten Array werden übersprungen, da der Callback für Indizes ohne zugewiesenen Wert nicht aufgerufen wird. Die vollständige Callback-Signatur und das Verhalten findest du in der MDN-Dokumentation zu filter().

Traditionelle Methode verwenden

Wenn die Bedingungen aus einem Formular oder einer anderen Datenquelle stammen, kannst du sie in einem Objekt speichern und dessen Einträge prüfen. Dieses Beispiel verlangt, dass jeder angeforderte Schlüssel eine eigene Eigenschaft des Benutzers ist und sein Wert exakt übereinstimmt. Mit den angegebenen Kriterien wird Aleena ausgewählt, weil sowohl ihr Name als auch ihre Adresse passen.

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) liefert die Eigenschaft-Wert-Paare, und every() verlangt, dass alle davon zutreffen. Strikte Gleichheit (===) bedeutet, dass sowohl Wert als auch Typ übereinstimmen müssen; eine fehlende Eigenschaft erfüllt ein angegebenes Kriterium nicht. Bei einem leeren Kriterienobjekt gibt every() für jeden Benutzer true zurück, sodass das Ergebnis alle Benutzer enthält. Dieses Muster lässt sich auf beliebige Schlüssel anwenden, ohne für jedes Feld einen eigenen Vergleich zu ergänzen.

Die Prüfung auf eigene Eigenschaften verhindert außerdem, dass eine geerbte Eigenschaft als Treffer für einen angeforderten Schlüssel zählt. Bei verschachtelten Daten musst du den verschachtelten Wert ausdrücklich vergleichen oder für dieses Feld ein eigenes Prädikat bereitstellen. Das Beispiel vergleicht direkt die Werte der obersten Ebene.

Die filter()-Methode verwenden

Wenn die Bedingungen feststehen und im Voraus bekannt sind, schreibst du sie direkt in das Prädikat und verknüpfst sie mit dem logischen UND-Operator (&&). Jeder Vergleich muss true ergeben, damit der Benutzer übernommen wird. Dieses vollständige Beispiel verwendet dieselben Daten und liefert denselben passenden Benutzer wie die dynamische Variante.

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'
  }
]

Verwende diese direkte Form, wenn die Felder und Vergleiche zur Programmlogik gehören. Die dynamische Variante eignet sich, wenn sich die angeforderten Felder ändern können. Die ursprüngliche JSFiddle-Demo ist ebenfalls verfügbar.

Das Prädikat sollte auf die Einschlussregeln beschränkt bleiben: Gib für Elemente, die im Ergebnis bleiben sollen, einen truthy Wert und für Elemente, die ausgeschlossen werden sollen, einen falsy Wert zurück. Da && eine Kurzschlussauswertung verwendet, werden spätere Vergleiche nur ausgeführt, wenn die vorherigen erfolgreich waren. Du kannst Prüfungen umstellen, wenn ein früher Vergleich viele Elemente mit geringem Aufwand ausschließen kann; die Bedeutung der Bedingung muss dabei klar bleiben.