Publicado el

Mapa hash de JavaScript: Par clave-valor de alto rendimiento

Autores

¿Por qué Hashmap?

Bueno, todos sabemos que otro lenguaje de programación tiene algo llamado Hashtable. Es una estructura de datos que almacena pares clave-valor que son muy útiles por su búsqueda en tiempo constante O(1). Es una estructura de datos ventajosa que podemos utilizar para almacenar datos. En JavaScript, no tenemos una estructura de datos integrada como Hashtable. Pero podemos usar un objeto para almacenar pares clave-valor. Se llama Map en JavaScript.

¿Qué es un Map?

Un Map es una colección de elementos donde cada elemento se almacena como un par Clave, Valor. Las claves y los valores de un Map pueden ser cualquier valor (tanto objetos como valores primitivos). Un objeto Map itera sus elementos en el orden de inserción: un bucle for...of devuelve una matriz de [clave, valor] para cada iteración.

Un Map mantiene pares clave-valor donde las claves pueden ser de cualquier tipo de datos. Un Map tiene una propiedad que representa el tamaño del Map. Un Map recuerda el orden de inserción original de las claves.

Métodos y Propiedades de Map

MétodoDescripción
new Map()Crea un nuevo objeto Map
set()Establece el valor para una clave en un Map
get()Devuelve el valor para una clave
has()Devuelve un booleano que indica si una clave existe en un Map
delete()Elimina una clave de un Map
clear()Elimina todas las claves de un Map
values()Devuelve un objeto iterador de los valores en un Map
keys()Devuelve un objeto iterador de las claves en un Map
entries()Devuelve un objeto iterador de los pares clave-valor en un Map
forEach()Ejecuta una función proporcionada una vez para cada par clave-valor en un Map
PropiedadDescripción
sizeDevuelve el número de pares clave/valor en un Map

Ejemplo de Map

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

console.log(map.get('name')) // John
console.log(map.get('age')) // 30
console.log(map.get('isMarried')) // true
console.log(map.get('address')) // {city: 'New York', state: 'NY'}
console.log(map.get('hobbies')) // ['reading', 'writing', 'coding']

console.log(map.size) // 5

Iteración de Map

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

// Iterar claves
for (const key of map.keys()) {
  console.log(key)
}

// Iterar valores
for (const value of map.values()) {
  console.log(value)
}

// Iterar pares clave-valor
for (const [key, value] of map.entries()) {
  console.log(key, value)
}

// Iterar pares clave-valor
map.forEach((value, key) => {
  console.log(key, value)
})

Map vs. Object

MapObject
Map es una colección de elementos con clave, como un Object. Pero la principal diferencia es que Map permite claves de cualquier tipo.Las claves de Object deben ser una cadena o un símbolo.
Map es iterable y se puede recorrer fácilmente.Object no es iterable y no se puede recorrer fácilmente.
Map tiene un método forEach integrado, por lo que no hay necesidad de convertirlo a una matriz.Object no tiene un método forEach integrado.
Map tiene una propiedad size, por lo que podemos obtener fácilmente el número de elementos.Object no tiene una propiedad size.
Map puede utilizar objetos como claves.Object no puede utilizar objetos como claves.
Map es generalmente más rápido que Object.Object es generalmente más lento que Map.

Conclusión

En este artículo, hemos aprendido sobre Map en JavaScript. Hemos aprendido sobre los métodos y propiedades de Map. También hemos conocido la diferencia entre Map y Object. Espero que hayas disfrutado este artículo. Si tienes alguna pregunta, deja un comentario a continuación. Gracias por leer.

Publicado originalmente en: https://blog.imam.dev/blog/javascript-hashmap

Referencias

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://www.freecodecamp.org/news/what-is-a-javascript-map-what-are-the-differences-between-map-and-object-in-javascript/

https://www.geeksforgeeks.org/map-vs-object-javascript/