Filtrar Arreglos en JavaScript: Tutorial Completo de Array.filter()
El método Array.filter() en JavaScript es una herramienta poderosa para procesar arreglos y crear nuevos arreglos que contienen solo los elementos que cumplen con una condición específica. En este tutorial, exploraremos a fondo las posibilidades de Array.filter(), cubriendo su sintaxis, cómo funciona y brindando ejemplos concretos para ilustrar su uso en diversas situaciones.
¿Qué es Array.filter()?
Array.filter() es un método de alto nivel que se utiliza para crear un nuevo arreglo a partir de un arreglo existente, pero con solo los elementos que satisfacen una condición determinada. Esta condición se establece mediante una función callback que se proporciona como argumento a filter(). La función callback recibe tres argumentos:
- Valor actual: El elemento actual del arreglo que se está iterando.
- Índice: La posición del elemento actual en el arreglo.
- Arreglo completo: El arreglo original sobre el que se está iterando.
La función callback debe retornar true si el elemento actual debe ser incluido en el nuevo arreglo filtrado, y false si debe ser excluido.
Sintaxis básica de Array.filter()
La sintaxis básica de Array.filter() es la siguiente:
javascript
nuevoArreglo = arregloOriginal.filter(funcionCallback);
Donde:
nuevoArreglo: Este es el nuevo arreglo que contendrá los elementos filtrados.arregloOriginal: Este es el arreglo original del cual se extraerán los elementos filtrados.funcionCallback: Esta es la función que se utilizará para determinar qué elementos se incluyen en el nuevo arreglo.
Ejemplos Prácticos de Array.filter()
1. Filtrar personas por edad:
«`javascript
const personas = [
{ nombre: «Ana», edad: 25 },
{ nombre: «Juan», edad: 30 },
{ nombre: «María», edad: 20 },
{ nombre: «Pedro», edad: 35 }
];
const personasMayoresDe25 = personas.filter(persona => persona.edad > 25);
console.log(personasMayoresDe25);
// Salida: [{ nombre: «Juan», edad: 30 }, { nombre: «Pedro», edad: 35 }]
«`
En este ejemplo, se crea un nuevo arreglo personasMayoresDe25 que contiene solo las personas con una edad mayor a 25 años.
2. Filtrar miembros de un equipo por posición:
«`javascript
const equipo = [
{ nombre: «Luis», posicion: «Delantero» },
{ nombre: «Carlos», posicion: «Defensa» },
{ nombre: «Miguel», posicion: «Mediocampista» },
{ nombre: «David», posicion: «Portero» }
];
const defensas = equipo.filter(jugador => jugador.posicion === «Defensa»);
console.log(defensas);
// Salida: [{ nombre: «Carlos», posicion: «Defensa» }]
«`
En este ejemplo, se crea un nuevo arreglo defensas que contiene solo a los jugadores cuya posición es «Defensa».
3. Filtrar ganadores de un concurso:
«`javascript
const concursantes = [
{ nombre: «Sofia», puntos: 100 },
{ nombre: «Pablo», puntos: 90 },
{ nombre: «Laura», puntos: 80 },
{ nombre: «Daniel», puntos: 120 }
];
const ganadores = concursantes.filter(concursante => concursante.puntos >= 100);
console.log(ganadores);
// Salida: [{ nombre: «Sofia», puntos: 100 }, { nombre: «Daniel», puntos: 120 }]
«`
En este ejemplo, se crea un nuevo arreglo ganadores que contiene solo a los concursantes que obtuvieron 100 puntos o más.
Accediendo al índice y al arreglo completo
La función callback en Array.filter() también puede acceder al índice del elemento actual y al arreglo completo utilizando los parámetros index y array.
Ejemplo:
«`javascript
const numeros = [1, 2, 3, 4, 5];
const numerosPares = numeros.filter((numero, index, array) => {
console.log(Elemento ${numero} en el índice ${index} del arreglo ${array});
return numero % 2 === 0;
});
console.log(numerosPares);
// Salida: [2, 4]
«`
En este ejemplo, la función callback imprime información sobre el elemento actual, su índice y el arreglo completo. Además, se utiliza la condición numero % 2 === 0 para filtrar solo los números pares.
Utilizando el objeto de contexto con this
La función callback de Array.filter() también puede acceder a propiedades adicionales desde un objeto de contexto usando la palabra clave this.
Ejemplo:
«`javascript
const persona = {
nombre: «Ana»,
edad: 25,
esMayorDeEdad: function() {
return this.edad >= 18;
}
};
const personasMayoresDeEdad = [persona].filter(persona => persona.esMayorDeEdad());
console.log(personasMayoresDeEdad);
// Salida: [{ nombre: «Ana», edad: 25, esMayorDeEdad: function() { … } }]
«`
En este ejemplo, la función esMayorDeEdad dentro del objeto persona se utiliza para determinar si una persona es mayor de edad. La palabra clave this dentro de la función esMayorDeEdad se refiere al objeto persona, lo que permite acceder a la propiedad edad.
Usos Avanzados de Array.filter()
1. Filtrar elementos por múltiples condiciones:
«`javascript
const productos = [
{ nombre: «Camiseta», precio: 15, talla: «M» },
{ nombre: «Pantalón», precio: 30, talla: «L» },
{ nombre: «Zapatos», precio: 50, talla: «M» },
{ nombre: «Sombrero», precio: 10, talla: «S» }
];
const productosBaratosYMediano = productos.filter(producto => {
return producto.precio < 20 && producto.talla === «M»;
});
console.log(productosBaratosYMediano);
// Salida: [{ nombre: «Camiseta», precio: 15, talla: «M» }]
«`
En este ejemplo, se filtra el arreglo productos para encontrar aquellos que tienen un precio menor a 20 y una talla «M».
2. Filtrar elementos utilizando Array.some() o Array.every():
«`javascript
const usuarios = [
{ nombre: «Luis», roles: [«Administrador», «Editor»] },
{ nombre: «Ana», roles: [«Editor»] },
{ nombre: «Carlos», roles: [«Colaborador»] }
];
const usuariosConRolEditor = usuarios.filter(usuario => usuario.roles.some(rol => rol === «Editor»));
console.log(usuariosConRolEditor);
// Salida: [{ nombre: «Luis», roles: [«Administrador», «Editor»] }, { nombre: «Ana», roles: [«Editor»] }]
«`
En este ejemplo, se filtra el arreglo usuarios para encontrar aquellos que tienen el rol «Editor». Se utiliza Array.some() para verificar si al menos un rol del usuario es «Editor».
3. Filtrar elementos utilizando Array.indexOf() o Array.includes():
«`javascript
const frutas = [«Manzana», «Plátano», «Naranja», «Uva»];
const frutasNoCitricas = frutas.filter(fruta => {
return [«Naranja», «Uva»].indexOf(fruta) === -1;
});
console.log(frutasNoCitricas);
// Salida: [«Manzana», «Plátano»]
«`
En este ejemplo, se filtra el arreglo frutas para encontrar aquellos que no son frutas cítricas. Se utiliza Array.indexOf() para verificar si la fruta está presente en el arreglo de frutas cítricas.
Resumen
El método Array.filter() es una herramienta esencial para trabajar con arreglos en JavaScript. Permite crear nuevos arreglos filtrados de manera eficiente, seleccionando solo los elementos que cumplen con una condición específica. Con la función callback y la posibilidad de acceder al índice y al arreglo completo, filter() ofrece un control preciso sobre el proceso de filtrado.
En este tutorial, hemos explorado a fondo Array.filter(), cubriendo su sintaxis, ejemplos prácticos y usos avanzados. A través de una comprensión profunda de este método, podrás aprovechar su poder para manipular y procesar arreglos de manera eficaz en tus aplicaciones JavaScript.