JavaScript
Tutorial JavaScript: Filtrado con filter() y find()
JavaScript filtrado: técnicas y ejemplos. Aprende técnicas de filtrado en JavaScript con ejemplos prácticos y detallados.
Aprende JavaScript GRATIS y certifícateEn JavaScript, las funciones filter()
y find()
son dos métodos muy útiles que se utilizan para filtrar elementos de un array basándose en ciertos criterios. Ambos métodos, filter()
y find()
, son métodos de prototipo de Array y están diseñados para facilitar la manipulación y extracción de datos en arrays sin modificar el array original en el proceso.
filter()
El método filter()
crea un nuevo array con todos los elementos que cumplan con la condición especificada por la función proporcionada como argumento. Esta función debe ser una función de llamada (callback) que toma un valor, un índice y el array como argumentos, y devuelve un valor booleano, es decir, true
si el elemento cumplió la condición y false
si no lo hizo.
La función se ejecuta en cada elemento del array, y si devuelve true
, el elemento se agrega al nuevo array. Si devuelve false
, el elemento se descarta.
const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function esPar(numero) {
return numero % 2 === 0;
}
const pares = numeros.filter(esPar);
console.log(pares); // [2, 4, 6, 8, 10]
En este ejemplo, se tiene un array numeros
que contiene números del 1 al 10. Se define una función de llamada esPar()
que determina si un número es par (comprobando que su resto al dividir por 2 es 0). Luego, se utiliza el método filter()
en el array numeros
y se pasa como argumento la función esPar
. El resultado es un nuevo array llamado pares
que solo contiene los números pares del array original.
find()
El método find()
es similar a filter()
en el sentido de que también busca elementos que cumplan con una condición especificada por una función de llamada (callback). Sin embargo, a diferencia de filter()
, el método find()
retorna el primer elemento que cumpla con la condición, en lugar de crear un nuevo array con todos los elementos que cumplan con la condición.
La función de llamada proporcionada como argumento para el método find()
también toma un valor, un índice y el array como argumentos y devuelve un valor booleano. Si el elemento que se está evaluando cumple con la condición, es decir, si devuelve true
, entonces find()
devuelve ese elemento y deja de iterar sobre el array. Si ningún elemento cumple con la condición, find()
devuelve undefined
.
const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function esDivisiblePor3(numero) {
return numero % 3 === 0;
}
const primerDivisiblePor3 = numeros.find(esDivisiblePor3);
console.log(primerDivisiblePor3); // 3
En este ejemplo, se tiene el mismo array numeros
que contiene números del 1 al 10. Se define una función de llamada esDivisiblePor3()
que determina si un número es divisible por 3. Luego, se utiliza el método find()
en el array numeros
y se pasa como argumento la función esDivisiblePor3
. El resultado es el valor 3
, que es el primer número divisible por 3 en el array original. Si ningún número en el array hubiera sido divisible por 3, el método find()
habría devuelto undefined
.
Uso de funciones flecha
En JavaScript, las funciones flecha son una forma concisa y elegante de declarar funciones sin tener que escribir la palabra clave function
. Esta característica se adapta perfectamente al uso de métodos como filter()
y find()
, ya que estos métodos requieren funciones de llamada (callback) que, en muchas ocasiones, son simples y de una sola línea. La sintaxis concisa de las funciones flecha hace que el código sea más fácil de leer y mantener.
Se muestra el uso de las funciones flecha con filter()
y find()
en base a los ejemplos anteriores:
const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Utilizando funciones flecha
const pares = numeros.filter(numero => numero % 2 === 0);
const primerDivisiblePor3 = numeros.find(numero => numero % 3 === 0);
console.log(pares); // [2, 4, 6, 8, 10]
console.log(primerDivisiblePor3); // 3
En este caso, se ha sustituido la función de llamada esPar()
por una función flecha que realiza la misma operación. La sintaxis es clara y sencilla: se coloca el argumento numero
seguido de una 'flecha' (=>
) y luego la expresión que se evalúa. Esta expresión devuelve true
si el número es par y false
si no lo es.
Al igual que con filter()
, para find()
se ha sustituido la función de llamada esDivisiblePor3()
por una función flecha que realiza la misma operación. La función flecha recibe el argumento numero
, seguido de la 'flecha' (=>
), y luego la expresión que se evalúa. Esta expresión devuelve true
si el número es divisible por 3 y false
si no lo es.
Parámetros de filter()
y find()
Tanto filter()
como find()
aceptan una función de llamada (callback) como argumento, que, a su vez, puede recibir hasta tres parámetros: el elemento actual del array, el índice del elemento actual y el array sobre el que se itera.
Estos tres argumentos proporcionan información adicional que puede ser útil al escribir funciones de call-back más avanzadas y/o específicas. A continuación, se muestra un ejemplo de cómo utilizar múltiples argumentos en una función de llamada proporcionada a filter()
y find()
:
const numeros = [10, 20, 30, 40, 50, 60];
// Función de llamada que utiliza el elemento, el índice y el array
const paresConIndicePar = numeros.filter((numero, indice, arr) => {
console.log(`Número: ${numero}, Índice: ${indice}, Array: ${arr}`);
return numero % 2 === 0 && indice % 2 === 0;
});
console.log(paresConIndicePar); // [10, 30, 50]
En este ejemplo, la función de llamada (callback) para filter()
utiliza los tres argumentos. La función devuelve true
solo si el número es par y su índice en el array también es par. Además, se imprime en la consola información adicional sobre el elemento actual, su índice y el array utilizando estos argumentos.
const productos = [
{ id: 1, nombre: 'camiseta', categoria: 'ropa' },
{ id: 2, nombre: 'pantalón', categoria: 'ropa' },
{ id: 3, nombre: 'reloj', categoria: 'accesorios' },
];
const resultadoFind = productos.find((producto, indice, arr) => {
if (producto.categoria === 'accesorios') {
console.log(`Se encontró un producto de la categoría 'accesorios' en el índice ${indice}`);
return true;
}
return false;
});
console.log(resultadoFind); // { id: 3, nombre: 'reloj', categoria: 'accesorios' }
En este segundo ejemplo, la función de llamada (callback) para find()
también utiliza los tres argumentos. La función devuelve el primer producto de la categoría 'accesorios' y muestra en la consola el índice en el array donde se encuentra dicho producto.
En resumen, tanto filter()
como find()
son métodos muy útiles en JavaScript para filtrar elementos en arrays según ciertos criterios definidos por una función de llamada. Mientras que filter()
crea un nuevo array con todos los elementos que cumplen con la condición, find()
devuelve el primer elemento que cumple con la condición y detiene la iteración.
Ejercicios de esta lección Filtrado con filter() y find()
Evalúa tus conocimientos de esta lección Filtrado con filter() y find() con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de JavaScript
Accede a todas las lecciones de JavaScript y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Javascript
Sintaxis
Tipos De Datos
Sintaxis
Variables
Sintaxis
Operadores
Sintaxis
Estructuras De Control
Sintaxis
Funciones
Sintaxis
Funciones Cierre (Closure)
Sintaxis
Funciones Flecha
Programación Funcional
Filtrado Con Filter() Y Find()
Programación Funcional
Transformación Con Map()
Programación Funcional
Reducción Con Reduce()
Programación Funcional
Clases Y Objetos
Programación Orientada A Objetos
Excepciones
Programación Orientada A Objetos
Encapsulación
Programación Orientada A Objetos
Herencia
Programación Orientada A Objetos
Polimorfismo
Programación Orientada A Objetos
Array
Estructuras De Datos
Conjuntos Con Set
Estructuras De Datos
Mapas Con Map
Estructuras De Datos
Manipulación Dom
Dom
Selección De Elementos Dom
Dom
Modificación De Elementos Dom
Dom
Eventos Del Dom
Dom
Callbacks
Programación Asíncrona
Promises
Programación Asíncrona
Async / Await
Programación Asíncrona
Certificados de superación de JavaScript
Supera todos los ejercicios de programación del curso de JavaScript y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el uso y funcionamiento de los métodos
filter()
yfind()
en JavaScript. - Aprender a utilizar
filter()
para crear un nuevo array con elementos filtrados que cumplan una condición dada. - Aprender a utilizar
find()
para obtener el primer elemento que cumpla una condición especificada. - Conocer la sintaxis y uso de funciones flecha como argumentos para
filter()
yfind()
para hacer el código más conciso y fácil de leer. - Familiarizarse con los parámetros que pueden recibirse en las funciones de llamada (callbacks) de
filter()
yfind()
, como el elemento actual del array, el índice y el array en sí, y cómo pueden utilizarse para escribir funciones más avanzadas.