Baseline Widely available
El método filter()
crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.
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])Parámetros
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 o en caso contrario retornará false
. Acepta tres parámetros:
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
.
Un nuevo array con los elementos que cumplen la condición. Si ningún elemento cumple la condición, se devolverá un array vacÃo.
Descripciónfilter()
llama a la función 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 sólo 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 algún valor. Los elementos del array que no cumplan la condición callback
simplemente los salta, y no son incluidos en el nuevo array.
callback
se invoca con tres argumentos:
Si se proporciona un parámetro 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 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, cuando pase su valor a callback
será el que tenga cuando filter()
lo recorra; los elementos que son eliminados no son recorridos.
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 inválidas desde un JSON
El siguiente ejemplo emplea filter()
para crear un json filtrado con todos lo elementos que tengan id numérico 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 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
Búsqueda en el arreglo
El siguiente ejemplo emplea filter() para filtrar el contendio de un arreglo en función de un criterio de búsqueda.
var fruits = ["apple", "banana", "grapes", "mango", "orange"];
/**
* Filtra la matrÃz en función de un criterio de búsqueda (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']
Implementación en ES2015
const fruits = ["apple", "banana", "grapes", "mango", "orange"];
/**
* Filtra la matrÃz en función de un criterio de búsqueda (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 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 código 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 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(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 también
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4