Array.prototype.filter()

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 aktuell verarbeitete Element im Array.

index

Der Index des aktuell verarbeiteten Elements im Array.

array

Das Array, auf welches filter() angewandt wurde.

thisArg Optional

Ein Wert, der als this beim Ausführen von callbackFn verwendet wird. Siehe iterative Methoden.

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.

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 aus allen Werten, für die callbackFn einen truthy Wert zurückgibt. Array-Elemente, die den callbackFn-Test nicht bestehen, werden nicht in das neue Array aufgenommen. Lesen Sie den Abschnitt zu iterativen Methoden, um mehr darüber zu erfahren, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen wurden. Sie wird nicht für leere Stellen in sparse arrays aufgerufen.

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

Das folgende Beispiel verwendet filter(), um ein gefiltertes Array zu erstellen, bei dem alle Elemente mit Werten kleiner als 10 entfernt wurden.

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

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(num) {
  for (let i = 2; num > i; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num > 1;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

Das folgende Beispiel verwendet filter(), um ein gefiltertes JSON von allen Elementen mit nicht null und numerischem id 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

Das folgende Beispiel verwendet filter(), 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']

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.

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 gerade aufgebaut wird — es gibt keine Möglichkeit, aus der Callback-Funktion auf das Array zuzugreifen, das gerade aufgebaut wird.

filter() wird leere Stellen überspringen.

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

Die filter()-Methode liest die length-Eigenschaft von this und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nicht negative ganze Zahl kleiner als length 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' ]

• Polyfill von Array.prototype.filter in core-js
• es-shims Polyfill von Array.prototype.filter
• Indizierte Sammlungen Leitfaden
• Array
• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.map()
• Array.prototype.some()
• Array.prototype.reduce()
• TypedArray.prototype.filter()