Array.prototype.filter()

De filter() method maakt een nieuwe array aan met enkel die elementen die de test doorstaan van een functie naar keuze.

Syntax

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

Parameters

callback

Functie, onderwerpt ieder element aan een test. Wordt aangeroepen met argumenten (element, index, array). Levert als resultaat de waarde true om het element te behouden, of anders false.

thisArg

Optioneel. Te gebruiken als de this waarde, wanneer een callback wordt uitgevoerd.

Beschrijving

filter() roept een geleverde callback functie één keer aan voor ieder element van een array en maakt een nieuwe array aan met alle waarden waarvoor de callback een waarde welke kan worden omgezet naar true (truthy values) retourneert. callback wordt alleen aangeroepen voor indices van de array, welke een waarde bezitten; deze wordt niet gebruikt voor indices welke zijn verwijderd, of welke nooit een waarde hebben verkregen. Array elements die niet de callback test doorstaan, worden simpelweg overgeslagen en worden niet in de nieuwe array opgenomen.

callback wordt aangeroepen met drie argumenten:

1. de waarde (value) van het element
2. de index van het element
3. het Array object dat wordt veranderd

Wanneer een thisArg parameter wordt toegevoegd aan filter, zal deze worden doorgegeven aan callback wanneer deze wordt aangeroepen, om gebruikt te worden als this waarde. In het andere geval zal de waarde undefined worden gebruikt als  this waarde. De this waarde, uiteindelijk zichtbaar in callback wordt bepaald door de gebruikelijke regels om de this waarde te bepalen voor een functie.

filter() verandert de array zelf niet, van waaruit deze als method wordt aangeroepen.

De reeks (range) van elementen welke door filter() onderhanden wordt genomen, wordt al voor de eerste aanroep van callback bepaald. Elementen, die aan de originele array worden toegevoegd nadat de filter() method was aangeroepen, zullen niet worden onderworpen aan callback. Indien bestaande elementen worden gewijzigd, of verwijderd, dan zal hun waarde, zoals overgedragen aan callback, de waarde zijn als die is, op het moment dat filter() ze bezoekt; elementen die worden verwijderd worden ook niet in behandeling genomen.

Voorbeelden

Filter lage waarden

Het volgende voorbeeld gebruikt filter() om een gefilterde array aan te maken, waarbij alle waarden onder de 10 zijn verwijderd.

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

Filter foutieve items van JSON

Het volgende voorbeeld gebruikten filter() voor een gefilterde json van alle elementen met een numerieke id.

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

var invalidEntries = 0;

function filterByID(obj) {
  if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
    return true;
  } else {
    invalidEntries++;
    return false;
  }
}

var arrByID = arr.filter(filterByID);

console.log('Gefilterde Array\n', arrByID); 
// Gefilterde Array
// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries); 
// Number of Invalid Entries = 4

Polyfill

filter() werd toegevoegd aan de  ECMA-262 standaard in de 5de editie; als deze kan het zijn dat deze niet in alle toepassingen van de standaard voorkomt. Als alternatief kun je de volgende code aan het begin van je scripts zetten, waardoor het gebruik van filter() word toegestaan binnen ECMA-262 implementaties, die dit nog niet van nature ondersteunen. Het algoritme is precies die, zoals gespecificeerd in  ECMA-262, 5de editie, aangenomen dat fn.call resulteert in de beginwaarde van  Function.prototype.call(), en dat Array.prototype.push() nog zijn originele waarde heeft.

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';

    if (this === void 0 || this === null) {
      throw new TypeError();
    }

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }

    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) {
        var val = t[i];

        // NOTE: Technically this should Object.defineProperty at
        //       the next index, as push can be affected by
        //       properties on Object.prototype and Array.prototype.
        //       But that method's new, and collisions should be
        //       rare, so use the more-compatible alternative.
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }

    return res;
  };
}

Specificaties

Browser compatibiliteit

Zie ook

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