Resumen
El metodo filter() crea un nuevo arreglo con todos los elementos que pasen la prueba implementada por la función dada.
Sintaxis
arr.filter(callback[, thisArg])
Parametros
callback
- Función para poner a prueba a cada elemento del array. Retorna
true
para mantener el elemento,false
de otra manera. thisArg
- Opcional. Usa el valor como
this
cuando es ejecutado elcallback
.
Descripción
filter
llama la función dada callback
por cada elemento del arreglo , y construye un nuevo arreglo con todos los valores para los cuales callback
retorna un valor verdadero. callback
es invocada solo para indices del arreglo 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 arreglo que no pasen la prueba callback
simplemente se saltan, y no son incluidos en el nuevo arreglo.
callback
es invocada con tres argumentos:
- El valor de cada elemento
- El indice del elemento
- El objeto Array que está siendo atravesado
Si un parametro thisArg
es dado a filter()
, este será pasado a callback
cuando sea invocada, para usarlo como valor this
. De lo contrario , el valor undefined
será pasado como valor this
. El valor this
observable en últimas por callback
se determina conforme a las las normas habituales para determinar el this visto por una función.
filter()
no hace mutar el arreglo 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 arreglo después de que comience la llamada a filter()
no serán visitados por callback
. Si se modifica o elimina un elemento existente del arreglo, su valor cuando pase a callback
será el que tengan cuando filter()
lo visite; los elementos que son eliminado no son visitados.
Ejemplo
Ejemplo: Sacando todos los valores pequeños
El siguiente ejemplo usa filter()
para crear un arreglo 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;
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('Arreglo 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) |