CSS, HTML & Javascript mit {stil}

Javascript array.filter()

Die Array-Methode filter gibt ein Array zurück, in dem nur noch bestimmte Elemente des Originals enthalten sind. Das neue Array ist der Rückgabewert und das Original-Array bleibt erhalten.

array-filter: little apples, blue apples filtered

Array-Elemente filtern

array.filter filtert Array-Elemente nach bestimmten Kriterien, ohne dass das Script bei einer Iteration die einzelnen Werte prüfen muss.

Wie auch array.map arbeitet array.filter mit einer Callback-Funktion, aber filter ändert Werte nicht, sondern prüft eine Bedingung.

             ┌── aktuell in Bearbeitung
             │
             │      ┌── Index
             │      │
             ▼      ▼
callback: (value, index, array) => Boolean
                           ▲
                           |
       aktuelles Array   ──┘

Die filter-Methode gibt ein Array zurück, in dem nur die Elemente sind, bei denen der Test in der Callback-Funktion true zurückgibt.

array.filter ( function(currentValue, index, arr), thisValue )
currentValue
Erforderlich: Wert des aktuellen Elements
index
Optional: Index des aktuellen Elements
arr
Optional: Das Array-Objekt, zu dem das aktuelle Element gehört
function checkLarge (num) {
	return num > 100;
}

const num = [100, 245, 57, 118];
const newArr = num.filter (checkLarge);
console.log (newArr);

[245, 118]

oder kürzer mit einer Arrow-Funktion:

const num = [100, 245, 57, 118];
const large = num.filter ((elem) => elem > 100);
console.log ("large", large); // [Log] large [245, 118] Array (2)

ES6 (ECMAScript) hat mehrere Methoden mitgebracht, die ähnliche Aufgaben wie filter ausführen:

filter
gibt ein Array aller Treffer zurück, die ein Kriterium erfüllen
array.reduce ()
reduziert ein Array auf bestimmte Elemente, z.B. um Ergebnisse zusammenzuführen
array.map ()
führt dieselben Anweisungen auf allen Elemente des Arrays aus
array.find ()
gibt das erste Element zurück, das dem Suchkriterium entspricht

Wenn also nur ein Element gesucht wird, wäre find die Methode der Wahl.

Leere Elemente in einem Array löschen

Das Beispiel entfernt alle leeren Elemente sowie Elemente die null oder undefined sind, und gibt ein neues bereinigtes Element zurück.

const arr = ["Frodo", , "Arwen", , undefined, 0, "Galadriel", null];

const results = arr.filter(element => {
  return element !== null && element !== undefined;
});

console.log(results); // ["Frodo", "Arwen", 0, "Galadriel"]

array.filter() – JSON-Array of Objects

Statt über ein langes Array von JSON-Objekten zu iterieren, findet array.filter() passende Objekte eleganter (typischer syntaktischer Zuckerguss).

douglas-adams-raumschiff-titanic
Douglas Adams
Raumschiff Titanic
mervyn-peake-gormenghast
Mervyn Peake
Gormenghast
pratchet-ab-die-post
Terry Pratchett
Ab die Post
pratchet-winterschmied
Terry Pratchett
Der Winterschmied
const json = [
	{ "title": "Raumschiff Titanic", "author": "Douglas Adams", "image": "douglas-adams-raumschiff-titanic.jpg"},
	{ "title": "Der Winterschmied", "author": "Terry Pratchett", "image": "pratchet-winterschmied.jpg"},
	{ "title": "Ab die Post", "author": "Terry Pratchett", "image": "pratchet-ab-die-post.jpg"},
	{ "title": "Gormenghast", "author": "Mervyn Peake", "image": "mervyn-peake-gormenghast.jpg"}
];

const books = json.filter (function (elem) {
	return elem.author === "Terry Pratchett";
});

for (const elem of books) {
	console.log (elem.title)
}

Als arrow-Funktion lässt sich json.filter() in eine Zeile packen.

const books = json.filter (elem => elem.author === "Terry Pratchett");

Und so lassen sich auch mehrere Bedingungen prüfen, die bestimmte Elemente für ein neues Array filtern.

const temp = d => d.pages > 300 && d.published < 2000;
const books2 = json.filter(temp);
console.log("books2", books2);

Array (3)
0 {title: "Titus Groan", author: "Pyke, Mervyn", published: 1946, pages: 535}
1 {title: "Structural Package Designs", author: "Pathak, Haresh", published: 1996, pages: 368}
2 {title: "1920s", author: "Yapp, Nick", published: 1996, pages: 393}

Filter kombinieren

const data = [
	{name: "Wallis", art: "Pferd", alter: 12, bild: "🐎"},
	{name: "Tiger", art: "Katze", alter: 7, bild: "🐅"},
	{name: "Alabaster", art: "Pferd", alter: 3, bild: "🐎"},
	{name: "Rufus", art: "Hund", alter: 16, bild: "🐕"},
	{name: "Bello", art: "Hund", alter: 2, bild: "🐕"},
];

const combi = data.filter (d => d.alter > 7 && d.art === "Hund");
console.log ("combi", combi)

Array (1)
0 {name: "Rufus", art: "Hund", alter: 16, bild: "🐕"}

Die kleine Funktion filterCombined filtert mit einem oder mehreren Kriterien.

const filterCombined = (d, filterArray) => {
  for (const elem of filterArray) {
    if (!elem(d)) {
      return false;
    }
  }
  return true;
}

const filterArray1 = [
  d => d.art === "Pferd",
];
const arr1 = data.filter (d => filterCombined (d, filterArray1));
console.log("arr1", arr1);

Filtern mit mehr als einem Kriterium: Alle Pferde, die älter als 10 Jahre sind.

const filterArray2 = [
  d => d.art === "Pferd",
  d => d.alter > 10,
];
const arr2 = data.filter (d => filterCombined (d, filterArray2));
console.log("arr2", arr2);

Array von Arrays filtern

const cities = [
	["Berlin", 3664088], 
	["Hamburg", 1852478], 
	["Dresden", 556227], 
	["Aachen", 248878], 
	["Krefeld", 226844]
];

const result = cities.filter(function(item) { return item[1] > 500000 });

// oder mit ES 6 arrow function
const result = cities.filter ( item => item[1] > 500000);

console.log(result);

[["Berlin", 3664088], ["Hamburg", 1852478], ["Dresden", 556227]]

Elemente im Array suchen

Array.filter ist nur eine der Methoden, die seit ES5/ES6 Arrays durchsuchen.

  • array.reduce (): Alle Elemente eines Arrays anhand einer Funktion (z.B. Summe) auf einen Rückgabewert reduzieren.
  • array.every, array.some: testen, ob jedes Element einer Bedingung gehorcht oder ob ein Element einer Bedingung folgt.
  • array.indexOf: Auf welchem Index liegt ein bestimmtes Element?
Suchen auf mediaevent.de