Introducción a los mapas en JavaScript

Introducción

El lenguaje de programación JavaScript ha evolucionado con el tiempo y ha incorporado muchas características nuevas. En 2015 se realizó una actualización importante que cambió la forma en que los desarrolladores usan el lenguaje. JavaScript 2015 (ES6) introdujo una característica llamada Map . No debe confundirse con el .map()método de matriz, el objeto Map integrado es otra forma de estructurar los datos. Los mapas son colecciones de pares clave-valor distintos y ordenados.

Este tutorial presentará algunos conceptos que le ayudarán a comprender y crear un nuevo objeto Mapa para su aplicación JavaScript.

Prerrequisitos

Para seguir este tutorial, debe tener conocimientos generales sobre JavaScript y el tipo de datos Object. Puede obtener más información sobre JavaScript en nuestra serie de tutoriales de JavaScript y sobre los objetos de JavaScript en este tutorial .

También deberías poder usar la consola de desarrollo de JavaScript en tu navegador web o en tu editor de texto favorito para ejecutar los ejemplos de código JavaScript. Los ejemplos de este tutorial usan la consola de JavaScript de Chrome para ejecutar el código. Puedes usar la herramienta que prefieras.

Creando un nuevo mapa

Comience abriendo su editor de texto o la consola de JavaScript en su navegador web. Cree un nuevo objeto Map inicializando una variable llamada itemscon el valor new Map():

let items = new Map();

La itemsvariable que creaste contiene un objeto de mapa vacío. Puedes observar el contenido de la itemsvariable en la consola escribiendo:

items;

OutputMap(0) {size: 0}

Tenga en cuenta que la salida revela el tamaño del objeto Map como 0. Hay métodos en el objeto Map que puede usar para actualizarlo. También hay propiedades en el objeto Map que puede usar para obtener información sobre su Map.

Uso de métodos de mapas

El objeto Mapa incluye métodos que puede utilizar para manipular sus pares clave-valor.

.set()Método

Puede llenar su objeto Map vacío con el .set()método. El .set()método acepta dos parámetros: una clave que puede usar para identificar un elemento y el valor del elemento. A diferencia de un literal de objeto, el par clave-valor puede ser de cualquier tipo de datos .

Esta es la sintaxis para llenar un objeto Mapa con pares clave-valor usando el .set()método:

your_data.set(key, value);

Por ejemplo, para completar su itemsobjeto Mapa con algunos nuevos pares clave-valor, agregue la itemsvariable con las siguientes líneas en su consola:

items.set('item-1','Car');items.set('item-2', 'Lawn Mower');items.set('item-3', 'Bicycle');items.set('item-4', 'Rake');

También puedes encadenar pares clave-valor de la siguiente manera:

items.set('item-1', 'Car')      .set('item-2', 'Lawn Mower')      .set('item-3', 'Bicycle')      .set('item-4','Rake');

Después de completar el itemsobjeto Map con algunos pares clave-valor, puede volver a verificar si se completó correctamente escribiéndolo en la consola. Esto itemsle devolverá el objeto Map completo:

items;

OutputMap(4) {'item-1' = 'Car', 'item-2' = 'Lawn Mower', 'item-3' = 'Bicycle', 'item-4' = 'Rake'}

.get()Método

Para recuperar un valor del objeto Map, utilice el .get()método. Debe conocer la clave para poder recuperar un valor.

Recupere un valor del itemsobjeto Mapa agregando al .get()método una clave conocida:

items.get('item-1');

Output'Car'

Si ingresa una clave no válida o no puede encontrar la clave que está buscando, este método devolverá undefined:

items.get('item-5');

Outputundefined

.has()Método

Puede buscar dentro de su objeto Mapa para determinar si existe una clave específica con el .has()método:

items.has('item-4');

Outputtrue

La salida es un valor booleano. Devuelve truesi la clave se encuentra en el objeto Map y falsesi no:

items.has('item-10');

Outputfalse

.delete()Método

Puede eliminar un elemento del objeto Mapa utilizando el .delete()método:

items.delete('item-2');

Outputtrue

El resultado se devuelve truesi se ha eliminado correctamente el elemento. Se devuelve falsesi no se encuentra un elemento con la clave especificada en el objeto de mapa.

.clear()Método

Puede eliminar todos los elementos de su objeto Mapa utilizando el .clear()método:

items.clear();

Outputundefined

undefinedSe espera el valor de retorno de . Después de usar el .clear()método, si escribe su itemsobjeto Map en la consola, notará que ya no contiene ninguna entrada:

items;

OutputMap(0) {size: 0}

Uso de la .sizepropiedad de mapa

Si desea saber el tamaño actual de un objeto Mapa, puede utilizar la .sizepropiedad para indicar cuántas entradas contiene:

items.size;

Output0

Tenga en cuenta que no hay un ()after .size. Esto se debe a que .sizeno es un método, sino una propiedad a la que puede acceder en el objeto Map para recopilar información. Puede resultar útil utilizar la .sizepropiedad cuando no esté seguro de con cuántas entradas está trabajando en un conjunto de datos en particular.

Inicialización de un mapa a partir de una matriz

Es posible que encuentre conjuntos de datos con matrices multidimensionales que son matrices dentro de una matriz. Si la matriz interna tiene exactamente dos valores, puede utilizar el primer valor de esa matriz como identificador de clave y el segundo valor de la matriz como valor de mapa.

Para demostrar esto, ingrese las siguientes líneas en su consola o editor de texto:

const food = [  ['food-item-1', 'Pizza'],  ['food-item-2', 'Burger'],  ['food-item-3', 'Taco'],];let menu = new Map(food);menu.get('food-item-2');

Output'Burger'

En este ejemplo, la matriz multidimensional contiene matrices con dos valores diferentes. El primer valor de food-item-1se utiliza como clave y el segundo valor de la matriz de Pizzase utiliza como valor para el nuevo objeto Map.

Notarás que cuando creas un nuevo objeto Map a partir de una matriz, pasas la matriz como argumento.

Nota: Es importante comprender que, cuando crea un nuevo objeto Map, no modifica la matriz original, sino que crea una copia de la matriz original en el nuevo objeto Map. Los cambios que realice en el nuevo objeto Map no afectarán la matriz original.

Una vez que haya creado una copia de la matriz, puede usar métodos de Mapa, como .get(), para cambiar y editar su objeto Mapa.

Iteración sobre el objeto de mapa

Puedes iterar sobre tu objeto Mapa usando bucles como for…of .

Cree un nuevo activitiesobjeto de Mapa y configúrelo con cuatro pares clave-valor diferentes. Luego, puede usar un for...ofbucle para iterar sobre los elementos del objeto de Mapa:

let activities = new Map();activities.set(1, 'Snowboarding');activities.set(2, 'Car Racing');activities.set(3, 'Canoeing');activities.set(4, 'Tennis');for (let [number, activity] of activities) {  console.log(`Activity ${number} is ${activity}`);}

OutputActivity 1 is SnowboardingActivity 2 is Car RacingActivity 3 is CanoeingActivity 4 is Tennis

También puedes utilizar el .forEach()método para iterar sobre un mapa de la misma manera.

Nota: Observa cómo el primer argumento en la forEach()función de devolución de llamada es valuey el segundo es key. Puedes obtener más información sobre esta estructura de sintaxis en el útil sitio de referencia de MDN de Mozilla .

Lo siguiente tendrá el mismo resultado que el for...ofejemplo:

activities.forEach((value, key) = {  console.log(`Activity ${key} is ${value}`);});

OutputActivity 1 is SnowboardingActivity 2 is Car RacingActivity 3 is CanoeingActivity 4 is Tennis

Conclusión

En este tutorial, creaste un nuevo objeto Map y aprendiste sobre los diferentes métodos para actualizarlo. Puedes continuar explorando nuestra serie Cómo codificar en JavaScript para aprender más sobre el funcionamiento interno de JavaScript.