Filtern mehrerer Bedingungen in JavaScript

1. Filter mehrere Bedingungen in JavaScript
2. Traditionelle Methode verwenden
3. Verwendung von die Filter-Methode

Der heutige Beitrag lehrt uns, ein Array mit mehreren Bedingungen zu filtern, indem wir die traditionellen und filter-Methoden in JavaScript verwenden.

Filter mehrere Bedingungen in JavaScript

Arrays sind eine Art JavaScript-Objekt mit einem festen numerischen Schlüssel und dynamischen Werten. JavaScript stellt mehrere integrierte Methoden bereit, um auf diese Array-Elemente zuzugreifen und diese zu bearbeiten.

Die Methode filter() erzeugt aus dem ursprünglichen Array ein neues Array mit allen Elementen, die die von der bereitgestellten Funktion implementierte Bedingung/Prüfung bestehen.

Syntax:

filter(callbackFn)

Die Methode filter akzeptiert callbackFn als Parameter. Diese Funktion ist ein Prädikat, um jedes Element des Arrays zu testen.

Gibt ein neues Array zurück, das das Element dazu zwingt, ansonsten true oder false zu bleiben.

Die Callback-Funktion wird mit den drei Argumenten aufgerufen.

1. Ein element ist das aktuell im Array verarbeitete Element.
2. Der index ist der Index des aktuellen Elements, das im Array verarbeitet wird.
3. Das array, auf dem filter() aufgerufen wurde.

Es wird ein neues Array zurückgegeben, das die Elemente enthält, die den Test bestehen. Wenn kein Element den Test besteht, wird ein leeres Array zurückgegeben.

filter() ruft eine bereitgestellte callbackFn-Funktion einmal für jedes Element eines Arrays auf und konstruiert ein neues Array aller Werte, für die callbackFn einen Wert zurückgibt, der wahr erzwingt.

callbackFn wird nur für Array-Indizes mit zugewiesenen Werten aufgerufen. Es wird nicht für gelöschte oder nie zugewiesene Indizes aufgerufen.

Array-Elemente, die den callbackFn-Test nicht bestehen, werden übersprungen und nicht in das neue Array aufgenommen. Weitere Informationen finden Sie in der Dokumentation zum filter().

Traditionelle Methode verwenden

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);

Wir haben im obigen Beispiel ein filter-Objekt mit den gewünschten Eigenschaften beschrieben. Wir haben die Callback-Funktion in der Methode filter definiert, um zu prüfen, ob die gewünschten Eigenschaften im angegebenen Array vorhanden sind.

Wenn die gewünschten Eigenschaften nicht vorhanden sind, wird false zurückgegeben; andernfalls wird true zurückgegeben.

Dieser Ansatz ist nützlich, wenn das filter-Objekt dynamisch generiert wird. Wenn das filter-Objekt statisch ist, können Sie die Objekte mit der nachstehenden &&-Bedingung filtern.

Versuchen Sie, das obige Code-Snippet in jedem Browser auszuführen, der JavaScript unterstützt. Das Ergebnis wird unten angezeigt.

Verwendung von die Filter-Methode

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

Ausgabe:

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

Demo