Zusammenfassung der Unterschiede zwischen den Methoden find() und filter() in JavaScript

Vorwort

JavaScript verfügt in ES6 über viele Array-Methoden, jede mit einzigartigen Einsatzmöglichkeiten und Vorteilen.

Beim Entwickeln von Anwendungen verwenden Sie meist Array-Methoden, um eine bestimmte Werteliste abzurufen und einzelne oder mehrere übereinstimmende Elemente zu erhalten.

Bevor wir die Unterschiede zwischen diesen beiden Methoden auflisten, wollen wir sie zunächst einzeln verstehen.

JavaScript find()-Methode

Die ES6-Methode find() gibt den Wert des ersten Elements zurück, das eine Testfunktion besteht. Wenn kein Wert die Testfunktion erfüllt, wird „undefined“ zurückgegeben.

Grammatik

Pfeilfunktionen, die in der folgenden Syntax verwendet werden.

finde((element) => { /* ... */ } )
finde((Element, Index) => { /* ... */ } )
finde((Element, Index, Array) => { /* ... */ } )

Wir haben eine Liste von Benutzerobjekten mit den Eigenschaften „Alter“ und „ID“, wie unten gezeigt:

lass Benutzer = [{
    Ich würde: 1,
    Name: 'John',
    Alter: 22
}, {
    Ich würde: 2,
    Name: 'Tom',
    Alter: 22
}, {
    Ich würde: 3,
    Name: 'Balaji',
    Alter: 24
}];

Der folgende Code verwendet die Methode find(), um den ersten Benutzer zu finden, der älter als 23 ist.

console.log(Benutzer.find(Benutzer => Benutzer.Alter > 23));
//Konsole
//{ ID: 3, Name: ‚Balaji‘, Alter: 24}

Jetzt wollen wir den ersten Benutzer finden, der 22 Jahre alt ist

console.log(Benutzer.finden(Benutzer => Benutzer.Alter === 22));
//Konsole
//{ ID: 1, Name: ‚John‘, Alter: 22}

Wenn keine Übereinstimmung gefunden wird, wird undefined zurückgegeben.

console.log(Benutzer.finden(Benutzer => Benutzer.Alter === 25));
//Konsole
//undefiniert

JavaScript filter()-Methode

Die Methode filter() erstellt ein neues Array, das alle Elemente enthält, die eine Testfunktion bestehen. Wenn kein Element die Testfunktion erfüllt, wird ein leeres Array zurückgegeben.

Grammatik

filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

Wir verwenden dasselbe Benutzer-Array und dieselbe Testfunktion wie im Filterbeispiel.

Der folgende Code verwendet die Filtermethode (), um den ersten Benutzer zu finden, der älter als 23 ist.

console.log(Benutzer.filter(Benutzer => Benutzer.Alter > 23));
//Konsole
Jetzt möchten wir Benutzer filtern, die 22 Jahre alt sind //[{ id: 3, name: 'Balaji', age:24}]

Jetzt wollen wir Benutzer filtern, die 22 Jahre alt sind

console.log(Benutzer.filter(Benutzer => Benutzer.Alter === 22));
//Konsole
//[{ id: 1, name: ‚John‘, Alter: 22},{ id: 2, name: ‚Tom‘, Alter: 22}]

Wenn keine Übereinstimmungen gefunden werden, wird ein leeres Array zurückgegeben.

console.log(Benutzer.filter(Benutzer => Benutzer.Alter === 25));
//Konsole
//[]

Unterschiede und Ähnlichkeiten zwischen find() und filter()

Gemeinsamkeiten

Funktionen höherer Ordnung: Beide dieser Funktionen sind Funktionen höherer Ordnung.

Der Unterschied

1. Übergeben Sie eine Testfunktion

find() gibt das erste Element zurück.

filter() gibt ein neues Array zurück, das alle Elemente enthält, die die Testfunktion bestehen.

2. Wenn kein Wert die Testfunktion erfüllt

find() gibt undefiniert zurück;

filter() gibt ein leeres Array zurück;

Direkt auf dem Code

lass arr = [
  {
    Name: 'Rick',
    Alter: 60
  },

  {
    Name: 'Rick',
    Alter: 70
  },

  {
    Name: 'Morty',
    Alter: 14
  }

]

lass findResult = arr.find(i => i.name === 'Rick')
let filterResult = arr.filter(i => i.name === 'Rick')

Konsole.log(arr); 
/* Ausgabeergebnis[
    {
      Name: "Rick",
      Alter: 60
    },

    {
      Name: "Rick",
      Alter: 70
    },

    {
      Name: "Morty",
      Alter: 14
    }
  ]

*/

console.log(findResult); // {Name: "Rick", Alter: 60}
console.log(filterResult); // [{name: "Rick", Alter: 60}, {name: "Rick", Alter: 70}]

Anhand der Ausgabe des obigen Codes können wir feststellen, dass weder „Find“ noch „Filter“ das ursprüngliche Array ändern.

Zusammenfassen

Damit ist dieser Artikel über die Unterschiede zwischen den Methoden find() und filter() in JavaScript abgeschlossen. Weitere Informationen zu den Unterschieden zwischen den Methoden find() und filter() in JavaScript finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!