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

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.

Array.includes: Existiert ein bestimmtes Element im Array
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