Array.prototype.filter()

Prubalo

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

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

Sintaxis

var newArray = arr.filter(callback(currentValue[, index[, array]])[, thisArg])

Parmetros

callback

Funcin que comprueba cada elemento del array para ver si cumple la condicin (tambin llamada predicado). Retorna true si el elemento la cumple o en caso contrario retornar false. Acepta tres parmetros:

currentValue

El elemento actual del array que est siendo procesado.

index Opcional

El ndice del elemento actual del array que est siendo procesado.

array Opcional

El array sobre el que se ha llamado filter.

thisArg Opcional

Opcional. Valor a utilizar como this cuando se ejecuta callback.

Valor devuelto

Un nuevo array con los elementos que cumplen la condicin. Si ningn elemento cumple la condicin, se devolver un array vaco.

Descripcin

filter() llama a la funcin callback sobre cada elemento del array, y construye un nuevo array con todos los valores para los cuales callback devuelve un valor verdadero. callback es invocada slo para ndices del array que tengan un valor asignado. No se invoca sobre ndices que hayan sido borrados o a los que no se les haya asignado algn valor. Los elementos del array que no cumplan la condicin callback simplemente los salta, y no son incluidos en el nuevo array.

callback se invoca con tres argumentos:

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

Si se proporciona un parmetro thisArg a filter(), este ser pasado a callback cuando sea invocado, 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 funcin.

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

El rango de elementos procesados por filter() se establece antes de la primera invocacin de callback. Los elementos que se aadan al array despus de que comience la llamada a filter() no sern visitados por callback. Si se modifica o elimina un elemento existente del array, cuando pase su valor a callback ser el que tenga cuando filter() lo recorra; los elementos que son eliminados no son recorridos.

Ejemplos

Filtrando todos los valores pequeos

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]

Filtrando entradas invlidas desde un JSON

El siguiente ejemplo emplea filter() para crear un json filtrado con todos lo elementos que tengan id numrico distinto de cero.

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 vlida
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("Nmero de Entradas Invalidas = ", entradasInvalidas);
// 4

Bsqueda en el arreglo

El siguiente ejemplo emplea filter() para filtrar el contendio de un arreglo en funcin de un criterio de bsqueda.

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

/**
 * Filtra la matrz en funcin de un criterio de bsqueda (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']

Implementacin en ES2015

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

/**
 * Filtra la matrz en funcin de un criterio de bsqueda (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() se aadi a la norma ECMA-262 en la 5ta edicin; como tal puede no estar presente en todas las implementaciones de la norma. Puedes sobrellevarlo insertando el siguiente cdigo al comienzo de su programa, 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 edicin, 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(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;

    var kValue;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          kValue = t[i]; // in case t is changed in callback
          if (func(t[i], i, t)){
            res[c++] = kValue;
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          kValue = t[i];
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = kValue;
          }
        }
      }
    }

    res.length = c; // shrink down array to proper size
    return res;
  };
}

Especificaciones

Compatibilidad con navegadores

Ver tambin

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