Map en Javascript

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.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *