Saltar al contenido
Portada » Maps JS

Maps JS

Los objetos Map son colecciones de parejas clave-valor. Los Maps en JS solo admiten una única de ocurrencia de una clave para cada objeto.

Un objeto Map se itera por cada pareja de clave-valor, cada iteración del bucle devolverá un array conformado por la pareja correspondiente [clave, valor]. Al iterar sobre el Map, se recorrerá según el orden de inserción de los elementos.

La igualdad de las claves se evalúa según el agoritmo SameValueZero. Esto significa que por ejemplo NaN será siempre igual a NaN, el resto de valores serán considerados igual en base al operador ===.

Maps y Objetos en JS

Un objeto es similar a un map, ambos permiten asociar claves a valores, recuperar los valores, eliminar claves y detectar si algo está almacenado en una clave concreta.

Por los motivos anteriores, de forma histórica los objetos han sido usados como maps. Sin embargo el manejo de maps es distinto al de los objetos y preferible en algunos casos:

  • Claves por defecto: Los objetos tienen un prototype por lo que pueden incluir claves por defecto y por tanto puede haber colisiones con las claves que quieras incluir. En los maps no hay claves por defecto, solo las que se incorporen.
  • Seguridad: Los map pueden usarse de forma segura con valores proporcionados por el usuario. No puede sobreescribirse el prototype como si podría ocurrir en el caso de los objetos.
  • Tipos de claves: En los maps pueden ser de cualquier tipo (incluyendo funciones, objetos o cualquier primitiva), en los objetos únicamente String o Symbol.
  • Ordenación de claves: Para el caso de maps la ordenación es directa y simple. En el caso de objetos es más complejo al menos en versiones anteriores de ECMAScript.
  • Tamaño: El número de elementos en un map puede extraerse de la propiedad size, en el caso de objetos debe extraerse manualmente.
  • Iteración: Un map puede ser directamente iterado, en un objeto debe implementarse.
  • Rendimiento: El rendimiento en map es mejor para inserciones y borrados frecuentes.
  • Serialización y parseo: En map no hay un método nativo que lo soporte. Para los objetos existe un método nativo de transformación a JSON.

Ejemplos de uso de Maps en JS

const mapTest= new Map();

const stringClave= 'cualquier cadena';
const objetoClave = {};
const funcionClave = funcion() {};

// establecemos los valores
mapTest.set(stringClave, "valor asociado con un string");
mapTest.set(objetoClave , 'valor asociado a un objeto');
mapTest.set(funcionClave , 'valor asociado a una funcion');

console.log(mapTest.size); // 3

// obtener valores
console.log(mapTest.get(stringClave)); // "valor asociado con un string"
console.log(mapTest.get(objetoClave )); // "valor asociado a un objeto"
console.log(mapTest.get(funcionClave )); // "valor asociado a una funcion"

console.log(mapTest.get('cualquier cadena')); // "valor asociado con un string", porque stringClave=== 'cualquier cadena'
console.log(mapTest.get({})); // undefined, porque objetoClave !== {}
console.log(mapTest.get(funcion() {})); // undefined, porque funcionClave !== funcion() {}

Iteración sobre un Map

const mapTest = new Map();
mapTest.set(0, 'cero');
mapTest.set(1, 'uno');

for (const [clave, valor] of mapTest) {
  console.log(`${clave} = ${valor}`);
}
// 0 = cero
// 1 = uno

for (const clave of mapTest.keys()) {
  console.log(clave);
}
// 0
// 1

for (const valor of mapTest.values()) {
  console.log(valor);
}
// cero
// uno

for (const [clave, valor] of mapTest.entries()) {
  console.log(`${clave} = ${valor}`);
}
// 0 = cero
// 1 = uno
mapTest.forEach((valor, clave) => {
  console.log(`${clave} = ${valor}`);
});
// 0 = cero
// 1 = uno

Recursos básicos Javascript

PrototypeAñadir propiedades de forma dinámica a un objeto
toLocaleStringHerramienta esencial para el formateo de fechas y números en aplicaciones internacionales
Recursividad y pilaUso de recursividad y funcionamiento de la pila JS
DesestructuraciónMecanismo para desempaquetar arrays y objetos
Manejo de StringsManejo básico de Strings, cadenas de caracteres
OperadoresUso de operadores de comparación y lógicos
PromesasGestión de peticiones asíncronas con promesas
SleepImplementación de la función sleep() en JS
ThisUso de la palabra reservada this en diferentes contextos
MapsTe enseñamos cuando usar Map y cuando Object con ejemplos
Switchery JSLibrería para modificar el estilo de los checkbox
Mejores libros Javascript EspañolEncuentra los mejores libros para aprender JS y convertirte en el desarrollador más demandado.
Exception JSManejo de excepciones en Javascript, control de errores y flujo de programa.
Obfuscator JavascriptProtege tu código Javascript Ofuscándolo
Javascript desde ceroAprende los conceptos básicos de Javascript, ponte en marcha.
LodashLodash hace que la manipulación de datos en JavaScript sea más fácil y menos propensa a errores
Formatdate JSFormateo y trabajo con fechas en javascript de forma sencilla.
DayjsBiblioteca para la gestión de fechas
padStartManeja cadenas de texto con la función padStart()