Array.prototype.filter()

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Diefilter()-Methode vonArray-Instanzen erstellt eineflache Kopie eines Teils eines gegebenen Arrays, gefiltert auf die Elemente aus dem gegebenen Array, die den Test bestehen, der von der bereitgestellten Funktion implementiert wird.

Probieren Sie es aus

const words = ["spray", "elite", "exuberant", "destruction", "present"];const result = words.filter((word) => word.length > 6);console.log(result);// Expected output: Array ["exuberant", "destruction", "present"]

Syntax

filter(callbackFn)filter(callbackFn, thisArg)

Parameter

callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt werden soll. Sie sollte einentruthy Wert zurückgeben, um das Element im resultierenden Array zu behalten, und einenfalsy Wert, um es auszuschließen. Die Funktion wird mit den folgenden Argumenten aufgerufen:

element: Das aktuelle Element, das im Array verarbeitet wird.
index: Der Index des aktuellen Elements, das im Array verarbeitet wird.
array: Das Array, auf demfilter() aufgerufen wurde.

thisArgOptional

Ein Wert, der alsthis beim Ausführen voncallbackFn verwendet werden soll. Sieheiterative Methoden.

Rückgabewert

Eineflache Kopie des gegebenen Arrays, die nur die Elemente enthält, die den Test bestehen. Wenn keine Elemente den Test bestehen, wird ein leeres Array zurückgegeben.

Beschreibung

Diefilter()-Methode ist eineiterative Methode. Sie ruft die bereitgestellte FunktioncallbackFn einmal für jedes Element in einem Array auf und erstellt ein neues Array aus allen Werten, für diecallbackFn einentruthy Wert zurückgibt. Array-Elemente, die dencallbackFn-Test nicht bestehen, werden im neuen Array nicht aufgenommen. Lesen Sie den Abschnitt überiterative Methoden für weitere Informationen darüber, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen sind. Es wird nicht für leere Slots insparse arrays aufgerufen.

Diefilter()-Methode istgenerisch. Sie erwartet nur, dass derthis-Wert einelength-Eigenschaft und integer-beschlüsselte Eigenschaften besitzt.

Beispiele

Herausfiltern aller kleinen Werte

Das folgende Beispiel verwendetfilter(), um ein gefiltertes Array zu erstellen, das alle Elemente mit Werten unter 10 entfernt hat.

function isBigEnough(value) {  return value >= 10;}const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);// filtered is [12, 130, 44]

Alle Primzahlen in einem Array finden

Das folgende Beispiel gibt alle Primzahlen im Array zurück:

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];function isPrime(n) {  if (n < 2) {    return false;  }  if (n % 2 === 0) {    return n === 2;  }  for (let factor = 3; factor * factor <= n; factor += 2) {    if (n % factor === 0) {      return false;    }  }  return true;}console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

Hinweis:Die Implementierung vonisPrime() dient nur zur Demonstration. Für eine reale Anwendung sollten Sie einen stark speicherintensiven Algorithmus wie dasSieb des Eratosthenes verwenden, um wiederholte Berechnungen zu vermeiden.

Filtern ungültiger Einträge aus JSON

Das folgende Beispiel verwendetfilter(), um ein gefiltertes JSON von allen Elementen mit nicht null, numerischenid zu erstellen.

const arr = [  { id: 15 },  { id: -1 },  { id: 0 },  { id: 3 },  { id: 12.2 },  {},  { id: null },  { id: NaN },  { id: "undefined" },];let invalidEntries = 0;function filterByID(item) {  if (Number.isFinite(item.id) && item.id !== 0) {    return true;  }  invalidEntries++;  return false;}const arrByID = arr.filter(filterByID);console.log("Filtered Array\n", arrByID);// Filtered Array// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]console.log("Number of Invalid Entries =", invalidEntries);// Number of Invalid Entries = 5

Suche in einem Array

Im folgenden Beispiel wirdfilter() verwendet, um den Array-Inhalt basierend auf Suchkriterien zu filtern.

const fruits = ["apple", "banana", "grapes", "mango", "orange"];/** * Filter array items based on search criteria (query) */function filterItems(arr, query) {  return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));}console.log(filterItems(fruits, "ap")); // ['apple', 'grapes']console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange']

Verwenden des dritten Arguments von callbackFn

Dasarray-Argument ist nützlich, wenn Sie ein anderes Element im Array zugreifen möchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zuerstmap(), um die numerische ID aus jedem Namen zu extrahieren, und dannfilter(), um die auszuwählen, die größer als ihre Nachbarn sind.

const names = ["JC63", "Bob132", "Ursula89", "Ben96"];const greatIDs = names  .map((name) => parseInt(name.match(/\d+/)[0], 10))  .filter((id, idx, arr) => {    // Without the arr argument, there's no way to easily access the    // intermediate array without saving it to a variable.    if (idx > 0 && id <= arr[idx - 1]) return false;    if (idx < arr.length - 1 && id <= arr[idx + 1]) return false;    return true;  });console.log(greatIDs); // [132, 96]

Dasarray-Argument istnicht das Array, das erstellt wird — es gibt keine Möglichkeit, über die Callback-Funktion auf das erstellte Array zuzugreifen.

Verwendung von filter() auf sparse arrays

filter() wird leere Slots überspringen.

console.log([1, , undefined].filter((x) => x === undefined)); // [undefined]console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined]

Aufrufen von filter() auf Nicht-Array-Objekten

Diefilter()-Methode liest dielength-Eigenschaft vonthis und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nichtnegative ganze Zahl kleiner alslength ist.

const arrayLike = {  length: 3,  0: "a",  1: "b",  2: "c",  3: "a", // ignored by filter() since length is 3};console.log(Array.prototype.filter.call(arrayLike, (x) => x <= "b"));// [ 'a', 'b' ]