Artículo original escrito por Kingsley Ubah
Artículo original JavaScript Array.filter() Tutorial – How to Iterate Through Elements in an Array
Traducido y adaptado por Santiago Yanguas
El método Array.filter() es posiblemente el método más importante y ampliamente utilizado para iterar sobre un arreglo en JavaScript.
El funcionamiento del método filter() es muy sencillo. Consiste en filtrar uno o más elementos (un subconjunto) de una colección más grande de elementos (un superconjunto) basándose en alguna condición/preferencia.
Todos hacemos esto todos los días, ya sea leyendo, eligiendo a nuestros amigos o a nuestro cónyuge, eligiendo qué película ver, etc.
El método Array.filter() en JavaScript
El método filter() toma una función callback y llama a esa función para cada elemento sobre el que itera dentro del arreglo de destino. La función callback de llamada puede tomar los siguientes parámetros:
valorActual: Es el elemento del arreglo sobre el que se está iterando actualmente.indice: Es la posición del índice delvalorActualdentro del arreglo.arreglo: Representa el arreglo de destino(final) junto con todos sus elementos.
El método filter crea un nuevo arreglo y devuelve todos los elementos que pasan la condición especificada en la llamada en el callback.
Cómo usar el método filter() en JavaScript
En los siguientes ejemplos, demostraré cómo se puede utilizar el método filter() para filtrar elementos de un arreglo en JavaScript.
filter() Ejemplo 1: Cómo filtrar elementos de un arreglo
En este ejemplo, filtramos todas las personas que son niños pequeños (cuya edad está comprendida entre 0 y 4 años).
let gente = [
{nombre: "aaron", edad: 65},
{nombre: "beth", edad: 2},
{nombre: "cara", edad: 13},
{nombre: "daniel", edad: 3},
{nombre: "ella", edad: 25},
{nombre: "fin", edad: 1},
{nombre: "george", edad: 43},
]
let pequeños = gente.filter(persona => persona.edad <= 3)
console.log(pequeños);
/*
[{
edad: 2,
nombre: "beth"
}, {
edad: 3,
nombre: "daniel"
}, {
edad: 1,
nombre: "fin"
}]
*/filter() Ejemplo 2: Cómo filtrar elementos en función de una propiedad concreta
En este ejemplo, solo filtraremos los miembros del equipo que sean desarrolladores.
let equipo = [
{
nombre: "aaron",
posicion: "developer"
},
{
nombre: "beth",
posicion: "ui designer"
},
{
nombre: "cara",
posicion: "developer"
},
{
nombre: "daniel",
posicion: "content manager"
},
{
nombre: "ella",
posicion: "cto"
},
{
nombre: "fin",
posicion: "backend engineer"
},
{
nombre: "george",
posicion: "developer"
},
]
let desarrolladores = equipo.filter(miembro => miembro.posicion == "developer")
console.log(desarrolladores);
/*
[{
nombre: "aaron",
posicion: "developer"
}, {
nombre: "cara",
posicion: "developer"
}, {
nombre: "george",
posicion: "developer"
}]
*/En el ejemplo anterior, hemos filtrado a los desarrolladores. Pero, ¿y si queremos filtrar a todos los miembros que no son desarrolladores?
Podríamos hacerlo:
let equipo = [
{
nombre: "aaron",
posicion: "developer"
},
{
nombre: "beth",
posicion: "ui designer"
},
{
nombre: "cara",
posicion: "developer"
},
{
nombre: "daniel",
posicion: "content manager"
},
{
nombre: "ella",
posicion: "cto"
},
{
nombre: "fin",
posicion: "backend engineer"
},
{
nombre: "george",
posicion: "developer"
},
]
let noDesarrolladores = equipo.filter(miembro => miembro.posicion !== "developer")
console.log(noDesarrolladores);
/*
[
{
name: "beth",
position: "ui designer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
}
]
*/filter() Ejemplo 3: Cómo acceder a la propiedad índice
Se trata de un concurso. En esta competición, hay tres ganadores. El primero obtendrá la medalla de oro, el segundo la de plata y el tercero, la de bronce.
Utilizando el filter y accediendo a la propiedad del indice de cada elemento en cada iteración, podemos filtrar cada uno de los tres ganadores en diferentes variables.
let ganadores = ["Anna", "Beth", "Cara"];
let oro = ganadores.filter((ganador, indice) => indice == 0);
let plata = ganadores.filter((ganador, indice) => indice == 1);
let bronce = ganadores.filter((ganador, indice) => indice == 2);
console.log(`Oro ganador: ${oro}, ganador de plata: ${plata}, ganador de bronze: ${bronce}`);
// "Oro ganador: Anna, Plata ganadora: Beth, Bronce ganador: Cara"filter() Ejemplo 4: Cómo utilizar el parámetro arreglo
Uno de los usos más comunes del tercer parámetro (arreglo) es inspeccionar el estado del arreglo sobre el que se está iterando. Por ejemplo, podemos comprobar si queda otro elemento en el arreglo. Dependiendo del resultado, podemos especificar que sucedan diferentes cosas.
En este ejemplo, vamos a definir un arreglo de cuatro personas. Sin embargo, como solo puede haber tres ganadores, la cuarta persona de la lista tendrá que ser descontada.
Para poder hacer esto, necesitamos obtener información sobre el arreglo de destino en cada iteración.
let competidores = ["Anna", "Beth", "Cara", "David"];
function mostrarGanadores(nombre, indice, arreglo) {
let esSiguienteItem = indice + 1 < arreglo.length ? true : false;
if (esSiguienteItem) {
console.log(`El ganador #${indice+1} es ${name}.`);
} else {
console.log(`Perdón, ${name} no es uno de los ganadores.`);
}
}
competidores.filter((nombre, indice, arreglo) => mostrarGanadores(nombre, indice, arreglo))
/*
"El ganador #1 es Anna."
"El ganador #2 es Beth."
"El ganador #3 es Cara."
"Perdón, David no es uno de los ganadores."
*/
Cómo usar el objeto de contexto
Además de la función de devolución de llamada, el método filter() también puede recibir un objeto de contexto.
filter(callbackfn, objetoContexto)Este objeto puede ser referido desde dentro de la función del callback usando la referencia de la palabra clave this.
filter() Ejemplo 5: Cómo acceder al objeto contexto con this
Esto va a ser similar al ejemplo 1. Vamos a filtrar a todas las personas que tengan entre 13 y 19 años (adolescentes).
Sin embargo, no codificaremos los valores dentro de la función callback. En su lugar, definiremos estos valores 13 y 19 como propiedades dentro del objeto range, que posteriormente pasaremos a filter como el objeto contexto (segundo parámetro).
let personas = [
{nombre: "aaron", edad: 65},
{nombre: "beth", edad: 15},
{nombre: "cara", edad: 13},
{nombre: "daniel", edad: 3},
{nombre: "ella", edad: 25},
{nombre: "fin", edad: 16},
{nombre: "george", edad: 18},
];
let rango = {
bajo: 13,
alto: 16
};
let jovenes = personas.filter(function(persona) {
return persona.edad >= this.bajo && persona.edad <= this.alto;
}, range)
console.log(jovenes)
/*
[{
edad: 15,
nombre: "beth"
}, {
edad: 13,
nombre: "cara"
}, {
edad: 16,
nombre: "fin"
}]
*/Pasamos el objeto rango como segundo argumento a filter(). En ese momento, se convirtió en nuestro objeto de contexto. En consecuencia, pudimos acceder a nuestros rangos superior e inferior en nuestra función de devolución de llamada con la referencia this.alto y this.bajo respectivamente.
Conclusiones
El método filter() del arreglo, filtra los elementos que coinciden con la expresión del callback y los devuelve.
Además de la función del callback, el método filter también puede tomar un objeto de contexto como segundo argumento. Esto te permitirá acceder a cualquiera de sus propiedades desde la función callback usando this.
Espero que hayas sacado algo útil de este artículo.
Si quieres aprender más sobre el desarrollo web, no dudes en visitar mi Blog.
Gracias por leer y hasta pronto.
P/S: Si, estás aprendiendo JavaScript, he creado un eBook que enseña 50 temas de JavaScript con notas digitales dibujadas a mano. Compruébalo aquí.