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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
charset="UTF-8" /> Clave type="text" id="key" /> Valor type="text" id="value" /> id="valores"> |
Nos creamos un fichero main.js y nos creamos nuestro mapa a nivel global.
|
1 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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:
|
1 2 3 4 5 6 7 8 9 10 |
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:
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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