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
Prototype | Añadir propiedades de forma dinámica a un objeto |
toLocaleString | Herramienta esencial para el formateo de fechas y números en aplicaciones internacionales |
Recursividad y pila | Uso de recursividad y funcionamiento de la pila JS |
Desestructuración | Mecanismo para desempaquetar arrays y objetos |
Manejo de Strings | Manejo básico de Strings, cadenas de caracteres |
Operadores | Uso de operadores de comparación y lógicos |
Promesas | Gestión de peticiones asíncronas con promesas |
Sleep | Implementación de la función sleep() en JS |
This | Uso de la palabra reservada this en diferentes contextos |
Maps | Te enseñamos cuando usar Map y cuando Object con ejemplos |
Switchery JS | Librería para modificar el estilo de los checkbox |
Mejores libros Javascript Español | Encuentra los mejores libros para aprender JS y convertirte en el desarrollador más demandado. |
Exception JS | Manejo de excepciones en Javascript, control de errores y flujo de programa. |
Obfuscator Javascript | Protege tu código Javascript Ofuscándolo |
Javascript desde cero | Aprende los conceptos básicos de Javascript, ponte en marcha. |
Lodash | Lodash hace que la manipulación de datos en JavaScript sea más fácil y menos propensa a errores |
Formatdate JS | Formateo y trabajo con fechas en javascript de forma sencilla. |
Dayjs | Biblioteca para la gestión de fechas |
padStart | Maneja cadenas de texto con la función padStart() |