Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Array.prototype.filter()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Diefilter()-Methode vonArray-Instanzen erstellt eineflache Kopie eines Teils eines gegebenen Arrays, das auf die Elemente des gegebenen Arrays gefiltert ist, die den Test bestehen, der von der bereitgestellten Funktion implementiert wurde.
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
callbackFnEine Funktion, die für jedes Element im Array ausgeführt wird. Sie sollte einentruthy Wert zurückgeben, um das Element im resultierenden Array zu behalten, und einenfalsy Wert, wenn nicht. Die Funktion wird mit den folgenden Argumenten aufgerufen:
thisArgOptionalEin Wert, der als
thisverwendet wird, wenncallbackFnausgeführt wird. 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 eine bereitgestelltecallbackFn-Funktion einmal für jedes Element in einem Array auf und erstellt ein neues Array aller Werte, für diecallbackFn einentruthy Wert zurückgibt. Array-Elemente, die dencallbackFn-Test nicht bestehen, werden in das neue Array nicht aufgenommen. Lesen Sie den Abschnitt zuiterativen Methoden für weitere Informationen darüber, wie diese Methoden im Allgemeinen funktionieren.
callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugeordnet sind. Es wird nicht für leere Slots insparsely besetzten Arrays aufgerufen.
Diefilter()-Methode istgenerisch. Sie erwartet nur, dass derthis-Wert einelength-Eigenschaft und integer-indizierte Eigenschaften hat.
Beispiele
Alle kleinen Werte herausfiltern
Das folgende Beispiel verwendetfilter(), um ein gefiltertes Array zu erstellen, in dem alle Elemente mit Werten unter 10 entfernt werden.
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:DieisPrime()-Implementierung dient nur zur Demonstration. Für eine reale Anwendung sollten Sie einen stark optimierten Algorithmus wie dasSieb des Eratosthenes verwenden, um wiederholte Berechnungen zu vermeiden.
Ungültige Objekte aus einem Array von Objekten herausfiltern
Das folgende Beispiel verwendetfilter(), um ein gefiltertes Array aller Objekte mit nicht-null, numerischemid 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 = 5Suchen in einem Array
Das folgende Beispiel verwendetfilter(), 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 auf ein anderes Element im Array zugreifen möchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zunächstmap(), um die numerische ID aus jedem Namen zu extrahieren und dannfilter(), um diejenigen 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, in der Rückruffunktion auf das erstellte Array zuzugreifen.
Verwenden von filter() bei spärlichen Arrays
filter() überspringt leere Slots.
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 nicht-negative Ganzzahl 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' ]Spezifikationen
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-array.prototype.filter |