JavaScript/Objekte/Array/filter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode filter durchläuft alle Elemente des Arrays auf dem sie aufgerufen wurde und erzeugt ein neues Array mit denjenigen Elementen des ursprünglichen Arrays, für welche die als Argument an filter übergebene Callbackfunktion den Wert true zurückgibt.


Syntax

Array.prototype.filter(callback(element[, index[, array]])[, thisArg])


Attribute
Writable true
Enumerable false
Configurable true



Beispiel
const even = number => number % 2 === 0


[1,2,3,4,5,6,7,8,9].filter(even) // [2,4,6,8]

Beschreibung

Bei der Methode filter handelt es sich um eine Funktion höherer Ordnung, die als Argument ein Prädikat erwartet, also eine Funktion, die ihre Argumente auf true und false abbildet. Diese Funktion wird von filter für jedes Element des Arrays aufgerufen, wobei das Element selbst, sein Index sowie eine Referenz auf das Array als Argument übergeben werden. Mit den Elementen des Arrays, für die das Prädikat zu dem Wert true ausgewertet wurde, wird ein neues Array gebildet.

Das ursprüngliche Array wird durch filter nicht verändert.

Darüber hinaus besitzt filter einen optionalen zweiten Parameter, über den ein Wert für die Kontextvariable this der Callbackfunktion angegeben werden kann. Diese Angabe hat allerdings keine Wirkung bei Pfeilfunktionen, da diese keine eigene Bindung für einen Funktionskontext besitzen.

Es werden von filter nur diejenigen Elemente des Arrays an die Callbackfunktion zur Prüfung übergeben, die zum Zeitpunkt des Aufrufs der Methode vorhanden waren. Später hinzugefügte Elemente werden nicht berücksichtigt. Wird ein Element in dem Array nach dem Aufruf von filter verändert oder gelöscht, so wird dies nur berücksichtigt, wenn das Element zu diesem Zeitpunkt noch nicht besucht wurde.

Bei dem Objekt in dessen Kontext die Methode filter aufgerufen wird, muss es sich nicht um ein Array handeln. Es genügt, dass es sich um ein Array-ähnliches Objekt mit einer Eigenschaft length und numerischen Indizes als Eigenschaftsnamen handelt.

Beispiele

Im folgenden Beispiel wird filter dazu verwendet, um aus einer Liste von als Objekt repräsentierten Dinosauriern diejenigen herauszufiltern, deren Gewicht über zehn Tonnen liegt. Auf der von filter zurückgegebenen Liste der Schwergewichte wird dann direkt die Methode map aufgerufen, um die Namen der Saurier aus den Datensätzen zu extrahieren. Außerdem prüfen wir, wieviele Saurier in der Liste einen Namen haben, der mit der Buchstabenfolge "us" endet.


Beispiel
const dinosaurs = [
    {name: 'Allosaurus',    weight:  2, length:  8, diet: 'Carnivore'},
    {name: 'Brachiosaurus', weight: 35, length: 20, diet: 'Herbivore'},
    {name: 'Diplodocus',    weight: 13, length: 24, diet: 'Herbivore'},
    {name: 'Spinosaurus',   weight:  7, length: 15, diet: 'Carnivore'},
    {name: 'Stegosaurus',   weight:  6, length:  9, diet: 'Herbivore'},
    {name: 'Triceratops',   weight:  8, length:  9, diet: 'Herbivore'}
]



const heavyweights = dinosaurs.filter(({weight}) => weight > 10).map(({name}) => name)

heavyweights // ['Brachiosaurus', 'Diplodocus']



const selection = dinosaurs.filter(({name}) => name.endsWith('us'))

selection.length // 5


In diesem Beispiel wird ein gerichteter Graph durch zwei Arrays repräsentiert, einem für die Knoten und einem für die Kanten. Hier wird filter nun dazu verwendet, Quellen zu finden, also Knoten, deren Eingangsgrad Null ist – die also keine eingehenden Kanten besitzen. Die an filter übergebene Callbackfunktion ruft ihrerseits die Methode every auf der Kantenliste auf, um zu testen ob eine Kante existiert, deren zweite Komponente dem aktuellen Knoten entspricht. Nur wenn es keine solche Kante gibt, wird der Knoten der Ergebnisliste hinzugefügt.


Beispiel
const nodes = [1, 2, 3, 4, 5, 6, 7, 8]

const edges = [
    [1, 4],
    [1, 5],
    [3, 1],
    [3, 6],
    [4, 2],
    [5, 6],
    [5, 2],
    [6, 7],
    [8, 4],
    [8, 7]
]


const sources = nodes.filter(node => edges.every(([_, tail]) => tail !== node))

sources // [3, 8]


Quellen

ECMA: Array.prototype.filter

MDN: filter