Hola a todos, hoy os voy a explicar como utilizar la clase Map en Javascript.
La clase Map en Javascript se utiliza para guardar clave y valor, es decir, que un valor tienen asociado una clave para acceder al mismo, lo que nos permite acceder directamente a un valor si sabemos su clave.
Vamos a tener el siguiente template:
<html> <head> <meta charset="UTF-8" /> <script src="main.js"></script> </head> <body> <p> <label>Clave</label> <input type="text" id="key" /> </p> <p> <label>Valor</label> <input type="text" id="value" /> </p> <button onclick="addElement()">Añadir elemento</button> <button onclick="removeElement()">Eliminar elemento</button> <button onclick="clearElements()">Limpiar elementos</button> <button onclick="showElements()">Mostrar elementos</button> <div id="valores"></div> </body> </html>
Nos creamos un fichero main.js y nos creamos nuestro mapa a nivel global.
var map = new Map();
Para añadir o actualizar elementos, lo hacemos con el método set, pasándole la clave y el valor. Si existe la clave, el valor se actualizará, sino se creará. Para saber si existe o no, podemos usar el método has. Algo así por ejemplo:
function addElement() { // Obtengo clave y valor let clave = document.getElementById('key').value; let value = document.getElementById('value').value; // Indico si existe o no la clave let exists = map.has(clave); // Si existe la clave, se actualizara el valor, sino lo crea if (exists) { alert('Se ha actualizado el valor de la clave: ' + clave + '=>' + value); } else { alert('Se ha añadido un valor a la clave: ' + clave + '=>' + value); } // Inserto o actualizo el valor map.set(clave, value); }
Para eliminar un elemento, usaremos el método delete de nuestro mapa, le pasamos una clave y si existe, borrará esa clave y su valor asociado. Algo así por ejemplo:
function removeElement() { // Obtengo la clave let clave = document.getElementById('key').value; // elimino la clave if (map.delete(clave)) { alert('Se ha eliminado la clave: ' + clave); } else { alert('No existe la clave: ' + clave); } }
Podemos limpiar todos los elementos del mapa usando el método clear de nuestro mapa. Algo así por ejemplo:
function clearElements() { // limpio todos los elementos map.clear(); alert('Se han limpiado el mapa'); }
Para mostrar todos los elementos, podemos recorrerlo con un simple for of.
function showElements() { // limpio lo que habia antes let elements = document.getElementById('valores'); elements.innerHTML = ''; // Recorro el mapa y voy creando elementos para cada clave for (const [key, value] of map) { console.log(key + ' = ' + value); const element = document.createElement('p'); const elementText = document.createTextNode(key + ' = ' + value); element.appendChild(elementText); elements.appendChild(element); } }
Veamos todo en funcionamiento:
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta