Map en Javascript

09/11/20220 comentarios

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 + '=&gt;' + value);
  } else {
    alert('Se ha añadido un valor a la clave: ' + clave + '=&gt;' + 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.