Our volunteers haven't translated this article into ไทย yet. Join us and help get the job done!
The Map
object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value.
Syntax
new Map([iterable])
Parameters
iterable
- Iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays). Each key-value pair is added to the new Map.
null
is treated asundefined
.
Description
A Map object iterates its elements in insertion order — a for...of
loop returns an array of [key, value]
for each iteration.
It should be noted that a Map that is a map of an object, especially a dictionary of dictionaries, will only map to the object's insertion order -- which is random and not ordered.
Key equality
Key equality is based on the "same-value" algorithm: NaN
is considered the same as NaN
(even though NaN !== NaN
) and all other values are considered equal according to the semantics of the === operator. In earlier versions of the ECMAScript 6 draft -0
and +0
were considered distinct (even though -0 === +0
), this has been changed in later versions and has been adapted in Gecko 29 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26) (bug 952870) and a recent nightly Chrome.
Objects and maps compared
Objects
are similar to Maps
in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), Objects
have been used as Maps
historically; however, there are important differences between Objects
and Maps
that make using a Map
better:
- An
Object
has a prototype, so there are default keys in the map. This could be bypassed by usingmap = Object.create(null)
since ES5, but was seldomly done. - The keys of an
Object
areStrings
andSymbols
, where they can be any value for aMap
. - You can get the size of a
Map
easily while you have to manually keep track of size for anObject
.
This does not mean you should use Maps
everywhere, objects still are used in most cases. Map
instances are only useful for collections, and you should consider adapting your code where you have previously used objects for such. Objects shall be used as records, with fields and methods.
If you're still not sure which one to use, ask yourself the following questions:
- Are keys usually unknown until run time, do you need to look them up dynamically?
- Do all values have the same type, and can be used interchangeably?
- Do you need keys that aren't strings?
- Are key-value pairs often added or removed?
- Do you have an arbitrary (easily changing) amount of key-value pairs?
- Is the collection iterated?
Those all are signs that you want a Map
for a collection. If in contrast you have a fixed amount of keys, operate on them individually, and distinguish between their usage, then you want an object.
Properties
Map.length
- The value of the
length
property is 0. get Map[@@species]
- The constructor function that is used to create derived objects.
Map.prototype
- Represents the prototype for the
Map
constructor. Allows the addition of properties to allMap
objects.
Map
instances
All Map
instances inherit from Map.prototype
.
Properties
Map.prototype.constructor
- Returns the function that created an instance's prototype. This is the
Map
function by default. Map.prototype.size
- Returns the number of key/value pairs in the
Map
object.
Methods
Map.prototype.clear()
- Removes all key/value pairs from the
Map
object. Map.prototype.delete(key)
- Removes any value associated to the
key
and returns the value thatMap.prototype.has(key)
would have previously returned.Map.prototype.has(key)
will returnfalse
afterwards. Map.prototype.entries()
- Returns a new
Iterator
object that contains an array of[key, value]
for each element in theMap
object in insertion order. Map.prototype.forEach(callbackFn[, thisArg])
- Calls callbackFn once for each key-value pair present in the
Map
object, in insertion order. If a thisArg parameter is provided to forEach, it will be used as the this value for each callback. Map.prototype.get(key)
- Returns the value associated to the
key
, orundefined
if there is none. Map.prototype.has(key)
- Returns a boolean asserting whether a value has been associated to the
key
in theMap
object or not. Map.prototype.keys()
- Returns a new
Iterator
object that contains the keys for each element in theMap
object in insertion order. Map.prototype.set(key, value)
- Sets the value for the
key
in theMap
object. Returns theMap
object. Map.prototype.values()
- Returns a new
Iterator
object that contains the values for each element in theMap
object in insertion order. Map.prototype[@@iterator]()
- Returns a new
Iterator
object that contains an array of[key, value]
for each element in theMap
object in insertion order.
Examples
Using the Map
object
var myMap = new Map(); var keyString = "a string", keyObj = {}, keyFunc = function () {}; // setting the values myMap.set(keyString, "value associated with 'a string'"); myMap.set(keyObj, "value associated with keyObj"); myMap.set(keyFunc, "value associated with keyFunc"); myMap.size; // 3 // getting the values myMap.get(keyString); // "value associated with 'a string'" myMap.get(keyObj); // "value associated with keyObj" myMap.get(keyFunc); // "value associated with keyFunc" myMap.get("a string"); // "value associated with 'a string'" // because keyString === 'a string' myMap.get({}); // undefined, because keyObj !== {} myMap.get(function() {}) // undefined, because keyFunc !== function () {}
Using NaN
as Map
keys
NaN
can also be used as a key. Even though every NaN
is not equal to itself (NaN !== NaN
is true), the following example works, because NaN
s are indistinguishable from each other:
var myMap = new Map(); myMap.set(NaN, "not a number"); myMap.get(NaN); // "not a number" var otherNaN = Number("foo"); myMap.get(otherNaN); // "not a number"
Iterating Maps
with for..of
Maps can be iterated using a for..of
loop:
var myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); for (var [key, value] of myMap) { console.log(key + " = " + value); } // 0 = zero // 1 = one for (var key of myMap.keys()) { console.log(key); } // 0 // 1 for (var value of myMap.values()) { console.log(value); } // zero // one for (var [key, value] of myMap.entries()) { console.log(key + " = " + value); } // 0 = zero // 1 = one
Iterating Maps
with forEach()
Maps can be iterated using the forEach()
method:
myMap.forEach(function(value, key) { console.log(key + " = " + value); }); // Will show 2 logs; first with "0 = zero" and second with "1 = one"
Relation with Array
objects
var kvArray = [["key1", "value1"], ["key2", "value2"]]; // Use the regular Map constructor to transform a 2D key-value Array into a map var myMap = new Map(kvArray); myMap.get("key1"); // returns "value1" // Use the spread operator to transform a map into a 2D key-value Array. console.log(uneval([...myMap])); // Will show you exactly the same Array as kvArray // Or use the spread operator on the keys or values iterator to get // an array of only the keys or values console.log(uneval([...myMap.keys()])); // Will show ["key1", "key2"]
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Map' in that specification. |
Standard | Initial definition. |
ECMAScript 2017 Draft (ECMA-262) The definition of 'Map' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support |
38 [1] |
13 (13) | 11 | 25 | 7.1 |
Constructor argument: new Map(iterable) |
38 | 13 (13) | No support | 25 | No support |
iterable | 38 | 17 (17) | No support | 25 | 7.1 |
Map.clear() |
31 38 |
19 (19) | 11 | 25 | 7.1 |
Map.keys(), Map.values(), Map.entries() |
37 38 |
20 (20) | No support | 25 | 7.1 |
Map.forEach() |
36 38 |
25 (25) | 11 | 25 | 7.1 |
Key equality for -0 and 0 | 34 38 |
29 (29) | No support | 25 | No support |
Constructor argument: new Map(null) |
(Yes) | 37 (37) | ? | ? | ? |
Monkey-patched set() in Constructor |
(Yes) | 37 (37) | ? | ? | ? |
Map[@@species] |
? | 41 (41) | ? | ? | ? |
Map() without new throws |
? | 42 (42) | ? | ? | ? |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | 38 [1] | 13.0 (13) | No support | No support | 8 |
Constructor argument: new Map(iterable) |
No support | 38 | 13.0 (13) | No support | No support | No support |
iterable | No support | No support | 17.0 (17) | No support | No support | 8 |
Map.clear() |
No support | 31 38 |
19.0 (19) | No support | No support | 8 |
Map.keys(), Map.values(), Map.entries() |
No support | 37 38 |
20.0 (20) | No support | No support | 8 |
Map.forEach() |
No support | 36 38 |
25.0 (25) | No support | No support | 8 |
Key equality for -0 and 0 | No support | 34 38 |
29.0 (29) | No support | No support | No support |
Constructor argument: new Map(null) |
? | (Yes) | 37.0 (37) | ? | ? | ? |
Monkey-patched set() in Constructor |
? | (Yes) | 37.0 (37) | ? | ? | ? |
Map[@@species] |
? | ? | 41.0 (41) | ? | ? | ? |
Map() without new throws |
? | ? | 42.0 (42) | ? | ? | ? |
[1] Starting with Chrome 31, the feature was available behind a preference. In chrome://flags
, activate the entry “Enable Experimental JavaScript”.