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;
});

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}

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]]