Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

Map

BaselineWidely available *

TheMap object holds key-value pairs and remembers the original insertion order of the keys.Any value (both objects andprimitive values) may be used as either a key or a value.

Try it

const map1 = new Map();map1.set("a", 1);map1.set("b", 2);map1.set("c", 3);console.log(map1.get("a"));// Expected output: 1map1.set("a", 97);console.log(map1.get("a"));// Expected output: 97console.log(map1.size);// Expected output: 3map1.delete("b");console.log(map1.size);// Expected output: 2

Description

Map objects are collections of key-value pairs. A key in theMapmay only occur once; it is unique in theMap's collection. AMap object is iterated by key-value pairs — afor...of loop returns a 2-member array of[key, value] for each iteration. Iteration happens ininsertion order, which corresponds to the order in which each key-value pair was first inserted into the map by theset() method (that is, there wasn't a key with the same value already in the map whenset() was called).

The specification requires maps to be implemented "that, on average, provide access times that are sublinear on the number of elements in the collection". Therefore, it could be represented internally as a hash table (with O(1) lookup), a search tree (with O(log(N)) lookup), or any other data structure, as long as the complexity is better than O(N).

Key equality

Value equality is based on theSameValueZero algorithm. (It used to useSameValue, which treated0 and-0 as different. Checkbrowser compatibility.) This meansNaN is considered the same asNaN (even thoughNaN !== NaN) and all other values are considered equal according to the semantics of the=== operator.

Objects vs. Maps

Object is similar toMap—both let you set keys tovalues, retrieve those values, delete keys, and detect whether something isstored at a key. For this reason (and because there were no built-inalternatives),Object has been used asMap historically.

However, there are important differences that makeMap preferable in somecases:

MapObject
Accidental Keys AMap does not contain any keys by default. It only contains what is explicitly put into it.

AnObject has a prototype, so it contains default keys that could collide with your own keys if you're not careful.

Note: This can be bypassed by usingObject.create(null), but this is seldom done.

Security AMap is safe to use with user-provided keys and values.

Setting user-provided key-value pairs on anObject may allow an attacker to override the object's prototype, which can lead to object injection attacks. Like the accidental keys issue, this can also be mitigated by using anull-prototype object.

Key Types AMap's keys can be any value (including functions, objects, or any primitive). The keys of anObject must be either aString or aSymbol.
Key Order

The keys inMap are ordered in a straightforward way: AMap object iterates entries, keys, and values in the order of entry insertion.

Although the keys of an ordinaryObject are ordered now, this was not always the case, and the order is complex. As a result, it's best not to rely on property order.

The order was first defined for own properties only in ECMAScript 2015; ECMAScript 2020 defines order for inherited properties as well. But note that no single mechanism iteratesall of an object's properties; the various mechanisms each include different subsets of properties. (for-in includes only enumerable string-keyed properties;Object.keys includes only own, enumerable, string-keyed properties;Object.getOwnPropertyNames includes own, string-keyed properties even if non-enumerable;Object.getOwnPropertySymbols does the same for justSymbol-keyed properties, etc.)

Size

The number of items in aMap is easily retrieved from itssize property. Determining the number of items in anObject is more roundabout and less efficient. A common way to do it is through thelength of the array returned fromObject.keys().
Iteration AMap is aniterable, so it can be directly iterated.

Object does not implement aniteration protocol, and so objects are not directly iterable using the JavaScriptfor...of statement (by default).

Note:

  • An object can implement the iteration protocol, or you can get an iterable for an object usingObject.keys orObject.entries.
  • Thefor...in statement allows you to iterate over theenumerable properties of an object.
Performance

Performs better in scenarios involving frequent additions and removals of key-value pairs.

Not optimized for frequent additions and removals of key-value pairs.

Serialization and parsing

No native support for serialization or parsing.

(But you can build your own serialization and parsing support forMap by usingJSON.stringify() with itsreplacer argument, and by usingJSON.parse() with itsreviver argument. See the Stack Overflow questionHow do you JSON.stringify an ES6 Map?).

Native support for serialization fromObject to JSON, usingJSON.stringify().

Native support for parsing from JSON toObject, usingJSON.parse().

Setting object properties

Setting Object properties works for Map objects as well, and can causeconsiderable confusion.

Therefore, this appears to work in a way:

js
const wrongMap = new Map();wrongMap["bla"] = "blaa";wrongMap["bla2"] = "blaaa2";console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

But that way of setting a property does not interact with the Map datastructure. It uses the feature of the generic object. The value of 'bla' is notstored in the Map for queries. Other operations on the data fail:

js
wrongMap.has("bla"); // falsewrongMap.delete("bla"); // falseconsole.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

The correct usage for storing data in the Map is through theset(key, value)method.

js
const contacts = new Map();contacts.set("Jessie", { phone: "213-555-1234", address: "123 N 1st Ave" });contacts.has("Jessie"); // truecontacts.get("Hilary"); // undefinedcontacts.set("Hilary", { phone: "617-555-4321", address: "321 S 2nd St" });contacts.get("Jessie"); // {phone: "213-555-1234", address: "123 N 1st Ave"}contacts.delete("Raymond"); // falsecontacts.delete("Jessie"); // trueconsole.log(contacts.size); // 1

Map-like browser APIs

BrowserMap-like objects (or "maplike objects") areWeb API interfaces that behave in many ways like aMap.

Just likeMap, entries can be iterated in the same order that they were added to the object.Map-like objects andMap also have properties and methods that share the same name and behavior.However unlikeMap they only allow specific predefined types for the keys and values of each entry.

The allowed types are set in the specification IDL definition.For example,RTCStatsReport is aMap-like object that must use strings for keys and objects for values.This is defined in the specification IDL below:

webidl
interface RTCStatsReport {  readonly maplike<DOMString, object>;};

Map-like objects are either read-only or read-writable (see thereadonly keyword in the IDL above).

The methods and properties have the same behavior as the equivalent entities inMap, except for the restriction on the types of the keys and values.

The following are examples of read-onlyMap-like browser objects:

Constructor

Map()

Creates a newMap object.

Static properties

Map[Symbol.species]

The constructor function that is used to create derived objects.

Static methods

Map.groupBy()

Groups the elements of a given iterable using the values returned by a provided callback function. The final returnedMap uses the unique values from the test function as keys, which can be used to get the array of elements in each group.

Instance properties

These properties are defined onMap.prototype and shared by allMap instances.

Map.prototype.constructor

The constructor function that created the instance object. ForMap instances, the initial value is theMap constructor.

Map.prototype.size

Returns the number of key/value pairs in theMap object.

Map.prototype[Symbol.toStringTag]

The initial value of the[Symbol.toStringTag] property is the string"Map". This property is used inObject.prototype.toString().

Instance methods

Map.prototype.clear()

Removes all key-value pairs from theMap object.

Map.prototype.delete()

Returnstrue if an element in theMap object existed and has beenremoved, orfalse if the element does not exist.map.has(key)will returnfalse afterwards.

Map.prototype.entries()

Returns a new Iterator object that contains a two-member array of[key, value] for each element in theMap object in insertion order.

Map.prototype.forEach()

CallscallbackFn once for each key-value pair present in theMap object, in insertion order. If athisArg parameter is provided toforEach, it will be used as thethis value for each callback.

Map.prototype.get()

Returns the value associated to the passed key, orundefined if there is none.

Map.prototype.has()

Returns a boolean indicating whether a value has been associated with the passed 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()

Sets the value for the passed 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[Symbol.iterator]()

Returns a new Iterator object that contains a two-member array of[key, value] for each element in theMap object in insertion order.

Examples

Using the Map object

js
const myMap = new Map();const keyString = "a string";const keyObj = {};const keyFunc = () => {};// setting the valuesmyMap.set(keyString, "value associated with 'a string'");myMap.set(keyObj, "value associated with keyObj");myMap.set(keyFunc, "value associated with keyFunc");console.log(myMap.size); // 3// getting the valuesconsole.log(myMap.get(keyString)); // "value associated with 'a string'"console.log(myMap.get(keyObj)); // "value associated with keyObj"console.log(myMap.get(keyFunc)); // "value associated with keyFunc"console.log(myMap.get("a string")); // "value associated with 'a string'", because keyString === 'a string'console.log(myMap.get({})); // undefined, because keyObj !== {}console.log(myMap.get(() => {})); // undefined, because keyFunc !== () => {}

Using NaN as Map keys

NaN can also be used as a key. Even though everyNaN isnot equal to itself (NaN !== NaN is true), the following example works becauseNaNs are indistinguishable from each other:

js
const myMap = new Map();myMap.set(NaN, "not a number");myMap.get(NaN);// "not a number"const otherNaN = Number("foo");myMap.get(otherNaN);// "not a number"

Iterating Map with for...of

Maps can be iterated using afor...of loop:

js
const myMap = new Map();myMap.set(0, "zero");myMap.set(1, "one");for (const [key, value] of myMap) {  console.log(`${key} = ${value}`);}// 0 = zero// 1 = onefor (const key of myMap.keys()) {  console.log(key);}// 0// 1for (const value of myMap.values()) {  console.log(value);}// zero// onefor (const [key, value] of myMap.entries()) {  console.log(`${key} = ${value}`);}// 0 = zero// 1 = one

Iterating Map with forEach()

Maps can be iterated using theforEach() method:

js
myMap.forEach((value, key) => {  console.log(`${key} = ${value}`);});// 0 = zero// 1 = one

Relation with Array objects

js
const kvArray = [  ["key1", "value1"],  ["key2", "value2"],];// Use the regular Map constructor to transform a 2D key-value Array into a mapconst myMap = new Map(kvArray);console.log(myMap.get("key1")); // "value1"// Use Array.from() to transform a map into a 2D key-value Arrayconsole.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray// A succinct way to do the same, using the spread syntaxconsole.log([...myMap]);// Or use the keys() or values() iterators, and convert them to an arrayconsole.log(Array.from(myMap.keys())); // ["key1", "key2"]

Cloning and merging Maps

Just likeArrays,Maps can be cloned:

js
const original = new Map([[1, "one"]]);const clone = new Map(original);console.log(clone.get(1)); // oneconsole.log(original === clone); // false (useful for shallow comparison)

Note:Keep in mind thatthe data itself is not cloned. In other words, it is only ashallow copy of theMap.

Maps can be merged, maintaining key uniqueness:

js
const first = new Map([  [1, "one"],  [2, "two"],  [3, "three"],]);const second = new Map([  [1, "uno"],  [2, "dos"],]);// Merge two maps. The last repeated key wins.// Spread syntax essentially converts a Map to an Arrayconst merged = new Map([...first, ...second]);console.log(merged.get(1)); // unoconsole.log(merged.get(2)); // dosconsole.log(merged.get(3)); // three

Maps can be merged with Arrays, too:

js
const first = new Map([  [1, "one"],  [2, "two"],  [3, "three"],]);const second = new Map([  [1, "uno"],  [2, "dos"],]);// Merge maps with an array. The last repeated key wins.const merged = new Map([...first, ...second, [1, "un"]]);console.log(merged.get(1)); // unconsole.log(merged.get(2)); // dosconsole.log(merged.get(3)); // three

Specifications

Specification
ECMAScript® 2026 Language Specification
# sec-map-objects

Browser compatibility

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp