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.

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)

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).

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.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?