Array.prototype.filter()

filter() erstellt ein neues Array, das alle Elemente enthält, die den Test, der in der angegebenen Callback Funktion implementiert ist, bestehen.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

ES6 version

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

let longWords = words.filter(word => word.length > 6);

// Filtered array longWords is ["exuberant", "destruction", "present"]

Syntax

var new_array = arr.filter(callback[, thisArg])

Parameter

callback

Eine Funktion, um jedes Element des Arrays zu testen. Die Funktion gibt true zurück, um das Element zu behalten, ansonsten false.

element

Das aktuell zu testende Element aus dem Array.

indexOptional

Der Index des aktuell zu testende Element aus dem Array.

arrayOptional

Das Array filter, der aufgerufen wurde.

thisArg Optional

Wert, der als this innerhalb der Funktion genutzt wird.

Rückgabewert

Ein neues Array mit den Elementen, die den Test bestanden haben. Wenn kein Element den Test besteht, wird ein leeres Array zurückgegeben.

Beschreibung

filter() ruft die angegebene callback-Funktion jeweils für jedes Element im Array auf und erstellt ein neues Array mit allen Elementen, für die die callback-Funktion true oder einen Wert, der true impliziert zurückgibt. callback wird nur für Indizes aufgerufen, die einen Wert zugewiesen haben; es wird nicht für Indizes aufgerufen, die gelöscht wurden oder deren Werte niemals zugewiesen wurden. Array-Elemente, die den Test nicht bestehen, werden übersprungen und nicht im neuen Array angelegt.

callback wird mit folgenden drei Argumenten aufgerufen:

1. Der Wert des Elements
2. Der Index des Elements
3. Das Array-Objekt, für das die Funktion aufgerufen wird

Wird ein thisArg Parameter für filter() angegeben, so wird dieser innerhalb des Aufrufs von callback als Wert für this verwendet. Ansonsten wird undefined als Wert für this innerhalb von callback verwendet. Der Wert von this innerhalb von callback  folgt den Regeln, wie this innerhalb von Funktionen zu sehen ist.

filter() verändert nicht das Array, für das diese Funktion aufgerufen wird.

Die Elemente, die von filter() verarbeitet werden, werden vor dem ersten Aufruf von callback bestimmt. Für Elemente, die nach dem Aufruf von filter() zum Array hinzugefügt werden, wird callback nicht aufgerufen. Werden bestehende Elemente des Arrays verändert, wird dennoch der Wert an callback übergeben, der beim Aufruf von filter() gesetzt war; Elemente, die gelöscht  wurden, werden nicht betrachtet.

Beispiele

Alle kleinen Werte herausfiltern

Das folgende Beispiel nutzt filter(), um ein gefiltertes Array zu erstellen, aus dem alle Element mit Werten kleiner als 10 entfernt sind.

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

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

Filtern von ungültigen Werten aus JSON

Das folgende Beispiel nutzt filter(), um ein gefiltertes JSON von allen Elementen mit numerischer id , ungleich null, zu erstellen.

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(obj) {
  if (isNumber(obj.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}

var 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 Arrays

Das folgende Beispiel benutzt filter(), um ein Array auf Basis eines Suchkriteriums zu filtern.

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

ES2015 Implementierung

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

Polyfill

filter() wurde dem ECMA-262 Standard in der fünften Edition hinzugefügt; deswegen kann es sein, dass es nicht in allen Standards implementiert ist. Durch Hinzufügen des folgenden Codes am Anfang eines Skripts ist die Verwendung von filter() auch in ECMA-262 Implementationen, die diese Funktion nicht nativ bereitstellen, möglich. Dieser Algorithmus ist exakt der, der in der 5. Auflage von ECMA-262 spezifiziert ist, unter der Annahme, dass fn.call den original Wert von Function.prototype.call() auswertet, und dass Array.prototype.push() seinen ursprünglichen Wert hat.

if (!Array.prototype.filter)
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();
    
    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined)
      while (++i !== len)
        // checks to see if the key was set
        if (i in this)
          if (func(t[i], i, t))
            res[c++] = t[i];
    else
      while (++i !== len)
        // checks to see if the key was set
        if (i in this)
          if (func.call(thisArg, t[i], i, t))
            res[c++] = t[i];
    
    res.length = c; // shrink down array to proper size
    return res;
  };

Spezifikationen

Browserkompatibilität

Siehe auch

• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.reduce()