Javascript Array filter – nur bestimmte Elemente behalten

Array-Elemente filtern

array.filter filtert Array-Elemente nach bestimmten Kriterien (z.B. gerade Zahlen, Wert kleiner als), ohne dass das Script bei einer Iteration die einzelnen Werte prüfen muss.

const arr = [17, 111, 24, 8, 31, 44, 16, 101];

const filtered = arr.filter(n => n % 2 === 0);
console.log (filtered)   // [Log] [24, 8, 44, 16]

filter() macht also dasselbe wie eine klassische for-Schleife, ist aber besser lesbar.

const filtered = [];

for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) filtered.push(arr[i]);
}

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)

Ähnlich wie array.filter()

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

Mervyn Peake

Gormenghast

Terry Pratchett

Ab die Post

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?