Map object in ECMAScript 6 is an ordered list of key/value. Any value either objects or primitive values may be used as either a key or a value.A key 7 is identified as different from “7”. There are more methods mentioned below:
1- clear()
2- delete(key)
3- entries()
4- forEach()
5- get()
6-has()
7-keys()
8-set()
9-values()
We can use set and get methods respectively to store and retrieve data in a map.
For Example:
var mapdemo = new Map();
mapdemo.set("state", Maharashtra);
mapdemo.set("city", Mumbai);
mapdemo.set(document.getElementById(my-state), { flagged: false });
mapdemo.set(document.getElementById(my-city), { flagged: false });
// Retreving Data
var state = mapdemo.get(state),
city = mapdemo.get(city),
metadata_state = mapdemo.get(document.getElementById(my state));
metadata_city = mapdemo.get(document.getElementById(my- city));
In the above example, 4 key-value pairs are stored using the set method. The key: “
state”
, “
city
”
stores a data in the form of a string while the key: document.getElementById(“
my-state”
)
and document.getElementById(“my-city”)
are
used to associate metadata with DOM elements. In case the key do not exist then a value “undefined” is returned on calling the method get().
We can use method has() to determine if the key exists in the map or not and the method delete() to remove a key-value pair from the map also we can use “size” to determine the number of items in the map.
For Example:
var mapdemo = new Map();
mapdemo.set("state", "Mahrashtra");
mapdemo.set("city", "Mumbai");
console.log(mapdemo .has("state")); // Output is true
console.log(mapdemo .get("state")); // Output is Mahrashtra
console.log(mapdemo .size); // Output is 2 as we have two keys, state and city // in this map
mapdemo.delete("state");
console.log(mapdemo.has("state")); // Output is false
console.log(mapdemo.get("state")); // Output is undefined
console.log(mapdemo.size); // Output is 1
If we want to remove all key-value pairs in the map, then we use clear() method:
For Example:
var mapdemo = new Map();
mapdemo.set("one", "Fruit");
mapdemo.set(1, "chalk");
mapdemo.size; //output: 2
mapdemo.has("one"); //output: true
mapdemo.clear();
mapdemo.size; //output: 0
mapdemo.has("one"); //output: false
We can pass array of arrays to the constructor of Map if we want to add large data in map. An array with two items i.e. a key and it's value is stored internally that creates a map consisting of an array with arrays of two items. We can initialize map as below:
var mapdemo = new Map([ [state, Maharasthra], [city, Mumbai]]);
console.log(mapdemo.has(state")); //output: true
console.log(mapdemo.get(state)); //output: Maharasthra
console.log(mapdemo.has(city)); //output: true
console.log(mapdemo.get(city)); //output: Mumbai
console.log(mapdemo.size); //output: 2
Working with all the data in map we use three generator methods from where we choose: keys and it iterates through the keys in map, if we choose: values then it iterates through the vlaues in map and if we choose items (by default items is the iterator for maps) then it iterates through the key-value pairs and returns a pair of key and its value. We can easily iterate through map using for-fo loop:
For Example:
var mapdemo = new Map([ ["state", "Uttarakhand"], ["city", "Dehradun"], ["zip", "248001"]]);
for (let key of mapdemo.keys()) {
console.log("Key: %s", key);
}
Output:
Key: state
Key: city
Key: zip
var mapdemo = new Map([ ["state", "Uttarakhand"], ["city", "Dehradun"], ["zip", "248001"]]);
for (let value of mapdemo.values()) {
console.log("Value: %s", value);
}
Output:
Value: Uttarakhand
Value: Dehradun
Value: 248001
var mapdemo = new Map([ ["state", "Uttarakhand"], ["city", "Dehradun"], ["zip", "248001"]]);
for (let item of mapdemo) {
console.log("Key: %s, Value: %s", item[0], item[1]);
}
Output:
Key: state, Value: Uttarakhand
Key: city, Value: Dehradun
Key: zip, Value: 248001
if we iterate through keys/values we will receive a single value each time. While iterating through the items, we receive an array with first item that represents the key and the second item that represents the value for the item.
We can also iterate through items using forEach() method. Here we pass a function with three arguments: value,key and the map.
For Example:
var mapdemo = new Map([ ["state", "Uttarakhand"], ["city", "Dehradun"], ["zip", "248001"]]);
mapdemo.forEach(function(value, key, mapdemo) {
console.log("Key: %s, Value: %s", key, value);
});
Output:
Key: state, Value: Uttarakhand
Key: city, Value: Dehradun
Key: zip, Value: 248001
Note:
Map has been implemented by Firefox and Chrome. In Chrome we enable ECMAScript 6 features manually by typing the url “chrome://flags” in the address bar of chrome and on pressing the enter key it directs us to a page wherein find “Experimental JavaScript Features” and then click on link Enable.
0 Comment(s)