JavaScript -Array -Filterfunktion

JavaScript bietet viele integrierte Array-Funktionen, um Aufgaben schnell und effizient zu erledigen. JavaScript Filter() Funktion ist eine dieser beliebten Funktionen.

In diesem Beitrag werden wir das Konzept des JavaScripts erfassen Filter() Funktion. Was ist a Filter() Funktion und wie können wir es verwenden, um den JavaScript -Code zu vereinfachen und die Aufgaben effizient und am schnellsten auszufüllen.

Was ist der Filter Funktion in JavaScript

JavaScripts Filter() Die Funktion für das Array wird verwendet, um die Daten basierend auf der angegebenen Bedingung oder dem gegebenen Test herauszufiltern.

• Der Filter() Die Funktion nimmt das Element eines Arrays eins nacheinander an und wendet die Bedingung auf jedes Element an.
• Der Filter() Funktion hält die Elemente, die die Bedingung in einem anderen Array übergeben.
• Das Filter() Die Funktion des Arrays wirkt sich nicht auf das ursprüngliche Array aus.

Erforschen wir mehr in die IT, um die Syntax und ihre Funktionalität zusammen mit einigen Beispielen zu verstehen.

Syntax der Filterfunktion in JavaScript

Array.filter (function_name, thisvalue);

Array Filter() Die Funktion nimmt eine Funktion als Rückruffunktion mit drei Argumenten. Die Syntax der Rückruffunktion und die Abfolge der Argumente werden so verlaufen:

Funktion function_name (Wert, Index, Array)
Rückkehrbedingung;

In der Rückruffunktion von Filter() Methode:

• Der erste Parameter ist der Strom Wert des Array -Elements während der Iteration.
• Der zweite Parameter ist der optionale Parameter, der der Strom ist Index des Array -Elements während der Iteration.
• Zuletzt können wir auch die übergeben Array selbst zur Rückruffunktion, um einige benutzerdefinierte Funktionen in der Rückruffunktion zu haben.

Wir können auch "This -thevalue" an die Funktion übergeben, wobei das Schlüsselwort "this" auf den übergeordneten Block/Objekt bezieht.

Jetzt werden wir einige Beispiele verwenden, um die realen Implementierungen zu sehen.

Notiz: Wir werden die Browserkonsole verwenden, um Beispiele zu demonstrieren, die in diesem Beitrag durchgeführt wurden. Um die Browserkonsole zu öffnen:

• Verwenden Sie das F12 Schlüssel in Chrom- und anderen Browsern auf Chrombasis.
• Verwenden Strg + Verschiebung + k Tastaturverknüpfungsschlüssel für Mozilla.
• Verwenden Option + ⌘ + c Tastaturverknüpfungsschlüsse in Safari (Wenn das Entwicklermenü nicht angezeigt wird, öffnen Sie die Einstellungen durch Drücken ⌘ +, und in Fortschrittlich Registerkarte Überprüfung "Menü entwickeln in der Menüleiste").

Verwenden Sie die Funktion filter () in JavaScript

Das beste Beispiel, um das zu verstehen Filter() Die Funktion besteht darin, einige Zahlen aus einem Array von Zahlen basierend auf der angegebenen Bedingung zu filtern.

Beispiel 1:

Angenommen, wir haben eine Reihe von Zahlen und möchten Zahlen größer als eine bestimmte Zahl:

VAR -Zahlen = [23,16,38,5,10,19]

Die erste Methode, um den gewünschten Zahlenbereich zu erhalten, besteht darin, das gesamte Array zu durchlaufen und eine Bedingung in die Schleife einzulegen, um zu überprüfen, ob die Zahl den angegebenen Test besteht (mehr als 18 oder nicht). Wenn die Nummer den Test besteht, wird sie an ein neues Array hinzugefügt/angehängt. Der Code der für die Schleife zum Ausfiltern der Zahlen ist unten angegeben:

varfilteredArray = [];
für (leti = 0; i18)
Filteredarray.Push (Zahlen [i])


Konsole.log (filteredArray);

Im obigen Code setzen wir zuerst eine Schleife über das Array "Zahlen" und setzen dann eine Bedingung mit der IF -Anweisung ein. Wenn das Array -Element die Bedingung übergibt, wird sie an die Variable "filteredarray" angehängt/gedrückt.

Obwohl wir den gewünschten Bereich als Ausgang bekommen haben. Aber warum nicht eine intelligente und einfache Möglichkeit verwenden, um das gefilterte Array mit dem zu erhalten? Filter() Methode des Arrays, bei der wir die Variablen nicht mutieren müssen “Filteredarray.”

Verwendung von Filter () Funktion

Der Filter() Funktionen, um die Zahlen von mehr als 18 zu erreichen, werden so gehen:

varfilteredArray = Zahlen.Filter (getAdults);
functionGetadults (n)
Rückkehr n> 18;

Konsole.log (filteredArray);

Im oben gegebenen Code können Sie sehen, dass wir zuerst die Funktion „getAdults“ an die übergeben haben Filter() Funktion und in der Funktion „getAdults“ haben wir gerade überprüft, ob die Zahl größer als 18 ist oder nicht, und ob diese Bedingung true zurückgibt, geben Sie dieses Array -Element zurück.

Sobald die Funktion "Filter" alle Zahlen im Array "Zahlen" überprüft, speichert sie das Endergebnis in der Variablen "FilteredArray".

Zuletzt haben wir gerade die Variable „filteredArray“ zusammengetragen, um zu überprüfen, ob unsere Filter() Funktion funktionierte gut oder nicht.

Sie können überprüfen, indem Sie den oben angegebenen Screenshot ansehen, dass die Filter() Die Funktion hat alle Zahlen zurückgegeben, die größer als 18 sind.

Ein weiterer kürzerer und einfacherer Schreiben Filter() Die Funktion besteht darin, die Rückruffunktion von zu machen Filter() Funktion einer Pfeilfunktion:

Die Syntax des Schreibens der Rückruffunktion innerhalb der Filter() Die Klammern der Funktion werden wie folgt sein:

varfilteredArray = Zahlen.filter ((n) =>
Rückkehr n> 18
);
Konsole.log (filteredArray);

Okay, dies war das einfache Beispiel, in dem wir nur eine Reihe von Zahlen haben; Was ist mit der Reihe von Objekten?. Versuchen wir es auch.

Beispiel 2:

Angenommen, wir haben eine Liste von Studenten in einem Array und möchten die Liste der Schüler erhalten, deren Gebühren über 8000 US -Dollar liegen:

var Schüler = [

ID: 1,
Name: "John", "
Alter: 12,
Gebühr: 8500
,

ID: 2,
Name: "Bob",
Alter: 15,
Gebühr: 4500
,

ID: 3,
Name: "Steve",
Alter: 10,
Gebühr: 7500
,

ID: 4,
Name: "Harry",
Alter: 13,
Gebühr: 10500
,

ID: 5,
Name: "Tom",
Alter: 14,
Gebühr: 9000
,

ID: 6,
Name: "Ron",
Alter: 11,
Gebühr: 6000
,
]

Der Filter() Funktionen, um die gefilterte Liste der Schüler wie folgt zu erhalten:

lavfilteredstudents = Schüler.filter ((student) =>
Returnstudent.Gebühr> 8000
);
Konsole.Protokoll (filteredstudents);

Der einzige Unterschied in diesem Code besteht nun darin, dass ein einzelnes Objekt als Wert an die Rückruffunktion übergeben wird. In der Definition der Rückruffunktion setzen wir eine Bedingung ein und geben das Objekt zurück, bei dem die Gebühr des Schülers größer als 8000 US -Dollar beträgt.

Wenn Sie sich den oben angehängten Screenshot ansehen, können Sie feststellen, dass die Gebühren der Schüler mehr als 8000 US -Dollar betragen und als Ausgabe angezeigt werden. So können wir also auf die Objekte eines Arrays in der Zugriffe zugreifen Filter() Funktion.

Abschluss

In diesem Beitrag haben wir gelernt, was a Filter() Funktion ist und wie wir es verwenden können, um den JavaScript -Code zu vereinfachen.

Wir haben gelernt, dass die Filter() Die Funktion filtert die Array -Elemente basierend auf der angegebenen Bedingung. Der Filter() Die Funktion nimmt das Element eines Arrays eins eins, nimmt eine Rückruffunktion auf, die auf jedes Element des Arrays angewendet wird, und gibt das neue gefilterte Array zurück.

In diesem Beitrag dreht sich alles um JavaScripts Filter() Funktion und ihre Verwendung. Es enthält einige grundlegende Beispiele, die beim Verständnis helfen Filter() leicht funktionieren.