En este artículo aprenderás a filtrar la información en un arreglo usando JavaScript. En muchas ocasiones nos encontramos con la necesidad hacer esto ya sea porque debemos mostrar solo información relevante o porque debemos implementar alguna validación. Para lograrlo utilizamos la función filter y aquí aprenderás a utilizarla como todo un maestro del código.
Esta es la tabla de contenido para este artículo:
- Sintaxis
- Cómo funciona
- Cómo implementar el callback
- Cómo implementar this (contexto)
- Ejemplo práctico con código
Sintaxis
array.filter(callback, thisArg)
Todos los arreglos en JavaScript tienen esta funcionalidad desde hace bastante tiempo, pero si tienes dudas puedes consultar este artículo en MDN sobre la compatibilidad en los navegadores.
Cómo funciona filter
Esta es la lista de los parámetros que la función admite:
- callback es una función que debemos especificar y que se ejecutará para cada elemento en el arreglo.
- thisArg es opcional y solo debemos utilizarlo cuando queremos que la función de callback se ejecute dentro de un contexto especial.
Veremos cada uno por separado para que sea más fácil entender cómo funciona.
Cómo implementar el callback de filter
Observa que “callback” debe ser una función que se ejecutará para cada elemento en el arreglo, por tanto debemos definirlo de la siguiente manera:
function callback(elemento, indice, arreglo) { }
Donde,
- elemento es cada valor en el arreglo.
- indice es la posición del valor dentro del arreglo, recuerda que comienza con CERO.
- arreglo es el arreglo que estamos explorando.
Esto significa que si tengo un arreglo con 5 elementos, esta función se ejecutará 5 veces. Veamos un ejemplo.
// creamos un arreglo
var datos = [100, 201, 330, 450, 512, 625, 710, 833, 915, 101];
// definimos los parámetros de la búsqueda
var inicial = 300;
var final = 600;
// esta es la función que utilizaremos para filtrar
function filtrarArreglo(elemento, indice, arreglo)
{
return elemento >= inicial && elemento <= final;
}
// filtramos el arreglo
var filtrado = datos.filter(filtrarArreglo);
alert(filtrado);
Explicación
- Línea 2. Creamos un arreglo con los valores que filtraremos.
- Línea 5 y 6. Creamos los parámetros que utilizaremos para filtrar la información.
- Línea 9. Definimos una función que evaluará cada valor en el arreglo.
- Línea 11. Devuelve true si el elemento está entre el valor inicial y final.
- Línea 15. Filtramos los datos del arreglo utilizando la función.
- Línea 17. Mostramos un mensaje con los datos filtrados.
IMPORTANTE: La función debe devolver true (verdadero) para que un elemento se incluya en el resultado. Observa la línea 11 para que veas un ejemplo.
IMPORTANTE 2: El arreglo original no se modifica. Obtenemos como resultado un nuevo arreglo con los datos que pasen el filtro.
Cómo implementar this (thisArg, el contexto)
Es muy raro que tengas que utilizar esta opción. Por lo general se utiliza en código complejo en donde involucramos contextos. Más adelante explicaré lo que es un contexto, por ahora observa el siguiente ejemplo:
// definimos los parámetros de la búsqueda
var inicial = 300;
var final = 600;
// esta es la función que utilizaremos para filtrar
function filtrarArreglo(elemento, indice, arreglo)
{
return elemento >= inicial && elemento <= final;
}
// creamos un arreglo dentro de un objeto
var ventas = {
datos: [100, 201, 330, 450, 512, 625, 710, 833, 915, 101],
inicial: 800,
final: 1200,
filtrar: function(){
return this.datos.filter(filtrarArreglo);
}
};
// filtramos el arreglo
var filtrado = ventas.filtrar();
alert(filtrado);
Si ejecutamos este script obtendremos como resultado: 330, 450, 512.
Uno pensaría que el resultado debió ser 833, 915, ¿no te parece? La razón de esto radica en el hecho de que la función que definimos como filtro está en un contexto diferente al que pertenece nuestra información.
Observa que la función de filtro “filtrarArreglo” no pertenece a ningún objeto, por tanto JavaScript le asigna el contexto de la ventana (Window). Pero los filtros del objeto “ventas” están dentro de “ventas”.
Las variables inicial y final en las líneas 2 y 3 no son las mismas que las que tenemos en la línea 14 y 15. Ambas están en diferentes contextos.
¿Cómo arreglamos esto?
Lo que tenemos que hacer es una pequeña modificación para lograr que la función de filtro esté en el mismo contexto que las variables que utilizamos para filtrar la información. Considera el siguiente ejemplo:
// esta es la función que utilizaremos para filtrar
function filtrarArreglo(elemento, indice, arreglo)
{
return elemento >= this.inicial && elemento <= this.final;
}
// creamos un arreglo dentro de un objeto
var ventas = {
datos: [100, 201, 330, 450, 512, 625, 710, 833, 915, 101],
inicial: 800,
final: 1200,
filtrar: function(){
return this.datos.filter(filtrarArreglo, this);
}
};
// filtramos el arreglo
var filtrado = ventas.filtrar();
alert(filtrado);
Explicación
- Línea 4. Modificamos la rutina para que utilice las variables inicial y final en el contexto activo. No importa cual sea, siempre usará el contexto activo.
- Línea 13. Agregamos “this” como segundo argumento a la función “filter“, lo que dice a JavaScript que utilice los datos en el objeto “ventas” para realizar el filtrado de la información.
Ejemplo práctico
He preparado un ejemplo muy interesante con HTML, CSS y un archivo bien documentado en JavaScript. Lo publiqué en la sección de Ejemplos en JavaScript en este mismo sitio, da clic en el siguiente botón para obtener el código completo:
Deja un comentario