Array.prototype.filter()

Resumen

El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.

//La siguiente función realiza una comprobación y devuelve un valor booleano (verdadero/falso)
function esSuficientementeGrande(valor) {
  return valor >= 10;
}

//Aquellos valores del array para los cuales esSuficientementeGrande devuelva verdadero, será almacenados en una array de salida, sin modificar el array inicial
var filtered = [12, 5, 8, 130, 44].filter(esSuficientementeGrande);
// filtered es el array [12, 130, 44]

Sintaxis

arr.filter(callback[, thisArg])

Parametros

callback
Función que comprueba cada elemento del array para ver si cumple la condición (también llamada predicado).  Retorna true si el elemento la cumple, false en caso contrario. Este callback acepta hasta tres parámetros.
elemento
El elemento en sí que se está visitando.
index
El índice del elemento que se está visitando.
array
El propio array que se está filtrando.
thisArg
Opcional. Usa el valor como this cuando es ejecutado el callback.

Descripción

filter llama a la función dada callback  para cada elemento del array , y construye un nuevo array con todos los valores para los cuales  callback retorna un valor verdadero. callback es invocada solo para indices del array que tengan asignado un valor. No es invocada para indices que hayan sido borrados o a los que no se les haya asignado valor alguno. Los elementos del array que no pasen la prueba callback  simplemente se saltan, y no son incluidos en el nuevo array.

callback es invocada con tres argumentos:

  1. El valor de cada elemento
  2. El indice del elemento
  3. El objeto Array que se está recorriendo

Si un parametro thisArg es dado a filter(), este será pasado a callback cuando sea invocada, para usarlo como valor this.  De lo contrario , se pasará el valor undefined como valor this.  El valor this dentro del callback se determina conforme a las las normas habituales para determinar el this visto por una función.

filter() no hace mutar el array sobre el cual es llamado.

El rango de elementos procesados por filter() se establece antes de la primera invocación de  callback. Los elementos que se añadan al array después de que comience la llamada a filter() no serán visitados por callback. Si se modifica o elimina un elemento existente del array,  su valor cuando pase a callback será el que tengan cuando filter() lo visite; los elementos que son eliminado no son visitados.

Ejemplo

Sacando todos los valores pequeños

El siguiente ejemplo usa filter() para crear un array filtrado que excluye todos los elementos con valores inferiores a 10.

function esSuficientementeGrande(elemento) {
  return elemento >= 10;
}
var filtrados = [12, 5, 8, 130, 44].filter(esSuficientementeGrande);
// filtrados es [12, 130, 44]

Ejemplo: Filtrar entradas inválidas en JSON

El siguiente ejemplo emplea filter() para crear un json filtrado con todos lo elementos cuya identificación se numérica y no sea cero ni NaN.

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

var entradasInvalidas = 0;
//Si el elemento tiene un atributo id, y su valor correspondiente es un numero
//Y no es el valor NaN, entonces es una entrada válida
function filtrarPorID(obj) {
  if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
    return true;
  } else {
    entradasInvalidas++;
    return false;
  }
}

var arrPorID = arr.filter(filtrarPorID);

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

console.log('Número de Entradas Invalidas = ', entradasInvalidas); 
// 4

Polyfill

filter() se añadió a la norma ECMA-262 en la 5ta edición; Como tal puede no estar presente en todas las implementaciones de la norma. Puedes sobrellevarlo insertando el siguiente codigo al comienzo de su programas, para permitir el uso de filter() en implementaciones de ECMA-262 que no lo soporten de forma nativa. Este algoritmo es exactamente el especificado en ECMA-262, 5ta edición, supone que  fn.call evalua al valor original de Function.prototype.call, y que Array.prototype.push tiene su valor original.

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;
  };
}

Especificaciones

Especificación Estado Comentario
ECMAScript 5.1 (ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Standard Definición Inicial. implementado en JavaScript 1.6.
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.filter' in that specification.
Standard  

Compatibilidad en navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico (Yes) 1.5 (1.8) 9 (Yes) (Yes)
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico (Yes) (Yes) 1.0 (1.8) (Yes) (Yes) (Yes)

Vease también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: cesargtzyanez, josegarciaclm95, ezain, dgrcode, vltamara, averdion, li0t, matajm
 Última actualización por: cesargtzyanez,