Pourquoi utiliser Map ?

Nous savons tous que d'autres langages de programmation ont quelque chose appelé Hashtable. Il s'agit d'une structure de données qui stocke des paires clé-valeur et qui est très appréciée pour sa recherche en temps constant O(1). C'est une structure de données avantageuse que nous pouvons utiliser pour stocker des données. En JavaScript, nous n'avons pas de structure de données intégrée comme Hashtable. Mais nous pouvons utiliser un objet pour stocker des paires clé-valeur. On l'appelle Map en JavaScript.

Qu'est-ce qu'une Map ?

Une Map est une collection d'éléments où chaque élément est stocké sous la forme d'une paire Clé, Valeur. Les clés et les valeurs d'une Map peuvent être de n'importe quelle valeur (objets et valeurs primitives). Un objet Map itère ses éléments dans l'ordre d'insertion - une boucle for...of renvoie un tableau de [clé, valeur] pour chaque itération.

Une Map contient des paires clé-valeur où les clés peuvent être de n'importe quel type de données. Une Map possède une propriété qui représente la taille de la Map. Une Map se souvient de l'ordre d'insertion original des clés.

Méthodes et propriétés de Map

Méthode	Description
new Map()	Crée un nouvel objet Map
set()	Définit la valeur pour une clé dans une Map
get()	Renvoie la valeur pour une clé
has()	Renvoie un booléen indiquant si une clé existe dans une Map
delete()	Supprime une clé d'une Map
clear()	Supprime toutes les clés d'une Map
values()	Renvoie un objet itérateur des valeurs dans une Map
keys()	Renvoie un objet itérateur des clés dans une Map
entries()	Renvoie un objet itérateur des paires clé-valeur dans une Map
forEach()	Exécute une fonction fournie une fois pour chaque paire clé-valeur dans une Map

Propriété	Description
size	Renvoie le nombre de paires clé/valeur dans une Map

Exemple 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

Itération 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'])

// Itérer sur les clés
for (const key of map.keys()) {
  console.log(key)
}

// Itérer sur les valeurs
for (const value of map.values()) {
  console.log(value)
}

// Itérer sur les paires clé-valeur
for (const [key, value] of map.entries()) {
  console.log(key, value)
}

// Itérer sur les paires clé-valeur
map.forEach((value, key) => {
  console.log(key, value)
})

Map vs. Object

Map	Object
Map est une collection d'éléments de données indexés, tout comme un Object. Mais la principale différence est que Map permet des clés de tout type.	Les clés d'un Object doivent être une chaîne de caractères ou un symbole.
Map est itérable et peut être facilement parcouru en boucle.	Un Object n'est pas itérable et ne peut pas être facilement parcouru en boucle.
Map a une méthode forEach intégrée, il n'est donc pas nécessaire de le convertir en tableau.	Un Object n'a pas de méthode forEach intégrée.
Map a une propriété size, ce qui permet d'obtenir facilement le nombre d'éléments.	Un Object n'a pas de propriété size.
Map peut utiliser des objets comme clés.	Un Object ne peut pas utiliser des objets comme clés.
Map est généralement plus rapide qu'un Object.	Un Object est généralement plus lent que Map.

Conclusion

Dans cet article, nous avons appris à connaître Map en JavaScript. Nous avons appris à connaître les méthodes et les propriétés de Map. Nous avons également appris la différence entre Map et Object. J'espère que vous avez apprécié cet article. Si vous avez des questions, n'hésitez pas à laisser un commentaire ci-dessous. Merci de votre lecture.

Publié à l'origine sur : https://blog.imam.dev/blog/javascript-hashmap

Références

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/