JavaScript/Objekte/Array/filter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Methode filter können die Werte eines Arrays nach selbst definierten Kriterien selektiert werden. Sie erwartet als Parameter eine Callback-Funktion und gibt ein neues Array mit den gefilterten Werten zurück.

  • ECMA 5
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel
var result = ['foo', 'bar', 'baz'].filter( element => ~element.indexOf('a') );


// result = ['bar', 'baz'];

Dabei werden alle Elemente des Arrays auf welches die Methode angewendet wird, denen ein Wert zugewiesen wurde und die nicht gelöscht wurden, beginnend mit dem Index [0] durchlaufen und die Callback-Funktion selektiert die Elemente, die in das neue Array übernommen werden sollen durch die Rückgabe eines Ausdrucks, der in einen Boolschen Wert umgewandelt werden kann. Das Array, auf das die Methode angewendet wird, wird hierbei nicht verändert.

Hinweis

Die Syntax element => … funktioniert nicht in Internet Explorer 11.

Parameter[Bearbeiten]

An die Methode filter können zwei Parameter übergeben werden, nämlich zum einen die Callback-Funktion sowie zum anderen ein optionaler zweiter Parameter, der sofern er angegeben ist, an die Callback-Funktion übergeben wird und dort mittels this referenziert werden kann.


  • [ ].filter(function (value, index, array) {return boolean}, reference)


An die Callback-Funktion selbst werden von der Methode drei Parameter übergeben, nämlich zuerst der Wert des Elementes, für das die Funktion aufgerufen wird, dann zweitens der Index des Elementes sowie drittens das Objekt, auf das die Methode angewendet wird.


Beispiel
var numbers = [1, 24, 2, 11, 4, 33, 5];


var result = numbers.filter( (num, index) => index >= num );


// result = [2, 4, 5];


Rückgabe[Bearbeiten]

Bei dem Rückgabewert der Callback-Funktion muss es sich um einen Boolschen Wert handeln oder um einen Ausdruck, der in einen solchen umgewandelt werden kann. Ergibt die Auswertung true, wird das Element übernommen, ergibt sie false, dann nicht.


Beispiel
var myNodeList = document.getElementsByTagName('MAIN')[0].children;



var myCollection = Array.prototype.slice.call(myNodeList).filter(function (element) {

    return element.hasAttribute('name');

});


Beschreibung[Bearbeiten]

Zwar verändert die Methode das Array für das sie aufgerufen wird nicht, aber durch entsprechende Parametrisierung ist es dennoch möglich, das Array durch die Callback-Funktion zu manipulieren.

Dabei ist aber zu berücksichtigen, dass nur die Elemente von der Methode erfasst werden, die zum Zeitpunkt vor dem ersten Aufruf von filter Teil des Arrays waren, Elemente die nach Beginn der Ausführung zum Array hinzugefügt wurden, werden nicht mehr geprüft. Wird hingegen ein Element, dass vor dem ersten Funktionsaufruf bereits Teil des Arrays war zur Laufzeit gelöscht oder wird sein Wert verändert, dann werden diese Veränderungen berücksichtigt, wenn sie erfolgen, bevor der Wert des Elementes an die Callback-Funktion übergeben wird.

Schließlich ist die Methode filter ebenso wie die meisten anderen Array-Methoden nicht nur auf Array-Objekte beschränkt, sondern sie kann auch anderen Objekt-Typen hinzugefügt werden.


Quellen[Bearbeiten]

ecma: Array.prototype.filter

mdn: Global_Objects/Array/filter