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

Syntax

var newArray = arr.filter(callback(element[, index[, array]])[, 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

Spezifikation Status Kommentar
ECMAScript 5.1 (ECMA-262)
Die Definition von 'Array.prototype.filter' in dieser Spezifikation.
Standard Initiale Definition. Implementiert in JavaScript 1.6.
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'Array.prototype.filter' in dieser Spezifikation.
Standard  
ECMAScript Latest Draft (ECMA-262)
Die Definition von 'Array.prototype.filter' in dieser Spezifikation.
Entwurf  

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung InternetNode.js
Grundlegende UnterstützungChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Janodejs Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: schlagi123, xdevs23, midnightmare, oliver-j, occcy
Zuletzt aktualisiert von: schlagi123,