Quel développeur n’a jamais utilisé l’objet Map dans son langage de prédilection ? personne bien entendu, cet objet très utile permet de créer un ensemble de couple clés/valeurs, la clé permettant de retrouver rapidement la valeur qui lui a été associée. Les clés sont des objets uniques et les valeurs peuvent être dupliquées.

© http://upload.wikimedia.org

© http://upload.wikimedia.org

Un tel objet n’existe pas en JavaScript contrairement en Java, nous allons cependant voir qu’il est possible de simuler en tel comportement rapidement en JavaScript, sans trop d’effort.

Java

En Java il existe plusieurs implémentations de cet interface, apportant chacune quelques variantes :

  1. java.util.HashMap : c’est l’implémentation standard, adaptée dans la plupart des cas.
  2. java.util.TreeMap : cette classe ajoute une fonction de tri des clés de la Map.
  3. java.util.LinkedHashMap : cette classe conserve l’ordre d’ajout des clés.
  4. java.util.IdentityHashMap : c’est l’opérateur ‘==’ qui est utilisé pour savoir si deux clés sont identiques (au lieu de la méthode equals() pour les autres).
  5. java.util.WeakHashMap : cette classe conserve les couples en utilisant des références faibles, si une clé n’est plus référencée dans le programme alors elle est automatiquement supprimée de la Map.

Voici un exemple d’utilisation :

Map<String, Map<String, String>> map = new HashMap<String, Map<String, String>>();
map.put("Danone", new HashMap<String, String>());
map.get("Danone").put("Biens", "10");
map.get("Danone").put("Services", "20");
map.put("Nestlé", new HashMap<String, String>());
map.get("Nestlé").put("Biens", "25");
map.get("Nestlé").put("Services", "11");

System.out.println(map.get("Danone").get("Biens")); // 10
System.out.println(map.get("Nestlé").get("Services")); // 11

JavaScript

Dans les faits c’est assez simple de faire la même chose en JavaScript, les tableaux associatifs sont là pour nous aider. Voici le même exemple que ci-dessus en utilisant la notation JSON pour se rendre compte que c’est tout simple au final :

var map = {
	"Danone" : {
		"Biens" : "10",
		"Services" : "20"
	},
	"Nestlé" : {
		"Biens" : "25",
		"Services" : "11"
	}
};

alert(map["Danone"]["Biens"]); // 10
alert(map["Nestlé"]["Services"]); // 11

Par contre lorsque vous souhaitez créer dynamiquement une tel Map, c’est un peu plus compliqué, il faut s’appuyer sur la structure de base « Object » qui est un conteneur de propriétés que l’on peut enrichir à l’infini :

var map = new Object();
map["Danone"] = new Object();
map["Danone"]["Biens"] = "10";
map["Danone"]["Services"] = "20";
map["Nestlé"] = new Object();
map["Nestlé"]["Biens"] = "25";
map["Nestlé"]["Services"] = "11";

alert(map["Danone"]["Biens"]); // 10
alert(map["Nestlé"]["Services"]); // 11

Aller plus loin

Voici quelques liens de bibliothèques JavaScript permettant de simuler intégralement l’objet HashMap de Java :

HashMapJS : une implémentation très simple d’une hash map. Les clés et valeurs peuvent être arbitrairement des objets javascript. Il n’y a aucune restriction sur les objets étant à la fois clé et valeur. Les méthodes autorisées sont les suivantes :  put, get, del, each.

jshashtable : une implémentation complète d’une hash table. Elle permet d’associer des objets en tant que clé comme en tant que valeur. Chaque clé est associé à une unique valeur. Les méthodes autorisées sont les suivantes : put, putAll, get, containsKey, containsValue, clear, isEmpty, keys, values, entries, remove, size, clone, each.

{ 2 commentaires… add one }

Participez !

Article suivant:

Article précédent:

Derniers Commentaires

  • Popeye { Bonjour Greg, On sent que tu connais ton sujet, merci pour tes conseils et ton... } – 18 juin, 2:22
  • Théo { Il me semble que le raccourci est un peu rapide... ne pas faire l'amalgame entre... } – 17 juin, 11:10
  • Inès { Et un plaisir de vous lire ! En vous remerciant de votre visite. Inès, stagiaire... } – 17 juin, 9:28
  • Greg { Bonjour LiveOptim, Merci de votre intervention, en effet cette V2 semble vraiment une bonne nouvelle... } – 13 juin, 13:36
  • stephen { Merci pour ton aide. Exact, ma page est en mode Quirks et effectivement cela fonctionne... } – 13 juin, 13:01
  • Mimie { Chez moi cela fonctionne bien (testé IE9 et IE10), vérifie bien que le "Mode navigateur"... } – 13 juin, 11:51
  • LiveOptim { Bonjour et merci de ce suivi sérieux incrémenté par votre benchmark. Notre commentaire concernera uniquement... } – 13 juin, 11:45
  • stephen { Bonjour Sur firefox ok, safari ok, IE 9 : marche pas :/ Vraiment dommage... Idem... } – 13 juin, 11:25

Catégories