Javascript Array filter – nur bestimmte Elemente behalten

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

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}

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.includes: Existiert ein bestimmtes Element im Array
Array.find: Ein bestimmtes Element im Array suchen
Array.indexOf: Auf welchem Index liegt ein bestimmtes Element