Array.prototype.filter() - JavaScript | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Array.prototype.filter()

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die filter()-Methode von Array-Instanzen erstellt eine flache 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.

In diesem Artikel

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

js
filter(callbackFn)
filter(callbackFn, thisArg)

Parameter

callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Sie sollte einen truthy Wert zurückgeben, um das Element im resultierenden Array zu behalten, und einen falsy Wert, wenn nicht. 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 das filter() angewendet wurde.

thisArg Optional

Ein Wert, der als this verwendet wird, wenn callbackFn ausgeführt wird. Siehe iterative Methoden.

Rückgabewert

Eine flache 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

Die filter()-Methode ist eine iterative Methode. Sie ruft eine bereitgestellte callbackFn-Funktion einmal für jedes Element in einem Array auf und erstellt ein neues Array aller Werte, für die callbackFn einen truthy Wert zurückgibt. Array-Elemente, die den callbackFn-Test nicht bestehen, werden in das neue Array nicht aufgenommen. Lesen Sie den Abschnitt zu iterativen 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 in sparsely besetzten Arrays aufgerufen.

Die filter()-Methode ist generisch. Sie erwartet nur, dass der this-Wert eine length-Eigenschaft und integer-indizierte Eigenschaften hat.

Beispiele

Alle kleinen Werte herausfiltern

Das folgende Beispiel verwendet filter(), um ein gefiltertes Array zu erstellen, in dem alle Elemente mit Werten unter 10 entfernt werden.

js
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:

js
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 isPrime()-Implementierung dient nur zur Demonstration. Für eine reale Anwendung sollten Sie einen stark optimierten Algorithmus wie das Sieb des Eratosthenes verwenden, um wiederholte Berechnungen zu vermeiden.

Ungültige Objekte aus einem Array von Objekten herausfiltern

Das folgende Beispiel verwendet filter(), um ein gefiltertes Array aller Objekte mit nicht-null, numerischem id zu erstellen.

js
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

Suchen in einem Array

Das folgende Beispiel verwendet filter(), um den Array-Inhalt basierend auf Suchkriterien zu filtern.

js
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

Das array-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ächst map(), um die numerische ID aus jedem Namen zu extrahieren und dann filter(), um diejenigen auszuwählen, die größer als ihre Nachbarn sind.

js
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]

Das array-Argument ist nicht 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.

js
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

Die filter()-Methode liest die length-Eigenschaft von this und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nicht-negative Ganzzahl kleiner als length ist.

js
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' ]

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Eingebaute Standardobjekte
Array
Konstruktor
1. Array()
Statische Methoden
Statische Eigenschaften
1. [Symbol.species]
Instanzmethoden
Instanzeigenschaften
1. length
2. [Symbol.unscopables]
Vererbung
Object/Function
Statische Methoden
Statische Eigenschaften
Instanzmethoden
Instanzeigenschaften
1. __proto__
2. constructor