Filtro de mapa de JavaScript
![Filtro de mapa de JavaScript](/img/JavaScript/ag-feature-image---javascript-map-filter.webp)
En el desarrollo web, por lo general, los desarrolladores usan HTML y CSS para crear sitios web/páginas web estáticos. Utilizan JavaScript (JS), un poderoso lenguaje de secuencias de comandos con varias características útiles para hacerlos interactivos y dinámicos.
JavaScript nos proporciona dos características de su océano de características: la función mapa()
y la función filtro()
. La función map()
creará una nueva matriz con pares clave-valor.
A través de la función filter()
podemos construir una nueva matriz con elementos que han pasado una prueba dada por un proceso.
Filtro de mapa de JavaScript
Ahora, imagina que debemos filtrar un mapa en JavaScript. Veamos cómo terminar la tarea con éxito.
Primero, creemos un mapa para demostrar esta tarea, como se muestra a continuación.
const usersMap = new Map(
[['Bob', 19], ['Robb', 22], ['Don', 45], ['Will', 64], ['Jack', 16]]);
En lo anterior, creamos un mapa con algunos datos y lo asignamos a una variable llamada usersMap
como nuestra nueva clase de mapa. Los datos consisten en los nombres de cinco usuarios y sus edades.
Digamos que necesitamos filtrar a los usuarios cuya edad es menor de 30 años. Podemos utilizar la función filter()
para realizar eso.
Ver el bloque de código dado.
const filteredMap = new Map([...usersMap].filter(([k, v]) => v < 30));
Como se mencionó anteriormente, dentro de la función filter()
, definimos los criterios que queremos probar sobre el mapa que creamos. Hemos utilizado […usersMap]
para indicar que estamos filtrando el mapa creado anteriormente con la información del usuario.
Luego asignamos el proceso anterior a una variable recién creada llamada mapa filtrado
. Luego imprimimos el mapa filtrado usando la función console.log()
como se muestra a continuación.
console.log([...filteredMap]);
Ahora bien, si ejecutamos este código, aparecerá el siguiente resultado.
Producción:
Como puede ver, obtenemos la información de los usuarios cuya edad es menor de 30 años.
Ahora pensemos que necesitamos la información del usuario cuya edad está entre 20 y 30 años. Implementemos nuestro código modificando los criterios en la función filter()
.
Consulte el siguiente fragmento de código.
const usersMap = new Map(
[['Bob', 19], ['Robb', 22], ['Don', 45], ['Will', 64], ['Jack', 16]]);
const filteredMap = new Map([...usersMap].filter(([k, v]) => v > 20 && v < 30 ));
console.log([...filteredMap]);
Como se muestra arriba, hemos cambiado nuestros criterios y ahora intentemos ejecutar este código.
Producción:
En el resultado anterior, obtenemos solo un usuario ya que nuestro mapa tiene solo un usuario de entre 20 y 30 años.
Hasta ahora, hemos filtrado solo los valores. Ahora intentemos filtrar las claves en el mapa.
Para este ejemplo, filtraremos los usuarios sin 'Will'
como su nombre. A continuación se muestra el código para lograr esta tarea.
const usersMap = new Map(
[['Bob', 19], ['Robb', 22], ['Don', 45], ['Will', 64], ['Jack', 16]]);
const filteredMap = new Map([...usersMap].filter(([k, v]) => k != 'Will'));
console.log([...filteredMap]);
Producción:
Arriba está el resultado que obtenemos después de ejecutar el código. Como puede ver, obtenemos el resultado incluyendo los usuarios cuyo nombre no es igual a 'Will'
.
Conclusión
Este artículo analiza cómo podemos filtrar un mapa utilizando la función filter()
de JavaScript. Primero, creamos un mapa y luego usamos el método filter()
para filtrar la información bajo diferentes criterios.
Además de la técnica mencionada anteriormente, existen más métodos para filtrar mapas en JavaScript, pero podemos lograr nuestro objetivo rápidamente a través de este método.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.