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