Javascript array.filter()

array-filter: little apples, blue apples filtered

array.filter () gibt ein Array zurück, in dem nur noch bestimmte Elemente des Originals enthalten sind. Das neue Array wird zurückgegeben und das Original-Array bleibt erhalten.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Array-Elemente filtern

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

Ähnlich wie 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

const newArr = num.filter (function (elem) {
	return elem > 100;
});

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
reduce
reduziert ein Array auf bestimmte Elemente, z.B. um Ergebnisse zusammenzuführen
map
führt dieselben Anweisungen auf allen Elemente des Arrays aus
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).

const json = [
	{ "title": "Titus Groan", "author": "Pyke, Mervyn", "published": 1946, "pages": 535},
	…
	{ "title": "Lautlos", "author": "Schätzing, Frank", "published": 2006, "pages": 702}
];


const books = json.filter (function (elem) {
	return elem.author === "Schätzing, Frank";
});

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 === "Schätzing, Frank");
Array (3)
0 {title: "Nachrichten aus einem unbekannten Universum", author: "Schätzing, Frank", published: 2007, pages: 646}
1 {title: "Der Schwarm", author: "Schätzing, Frank", published: 2004, pages: 992}
2 {title: "Lautlos", author: "Schätzing, Frank", published: 2006, pages: 702}

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: "🐕"}

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.