Map and Set ​

JavaScript's default object representation {} can be viewed as a data structure similar to a Map or Dictionary in other languages, consisting of a set of key-value pairs.

However, JavaScript objects have a limitation: keys must be strings. In reality, using Numbers or other data types as keys is often reasonable.

To address this issue, the latest ES6 specification introduced a new data type, Map. To test if your browser supports the ES6 specification, run the following code. If your browser throws a ReferenceError, you'll need to switch to a browser that supports ES6:

let m = new Map();
let s = new Set();
console.log('Your browser supports Map and Set!');
// Directly run the test

Map ​

A Map is a structure of key-value pairs with very fast lookup speeds.

For example, if you want to look up grades based on student names using an Array, you would need two Arrays:

let names = ['Michael', 'Bob', 'Tracy'];
let scores = [95, 75, 85];

To find a corresponding grade for a given name, you first have to find the index in names, and then retrieve the grade from scores. The longer the Array, the more time-consuming this process becomes.

Using a Map allows you to have a simple "name"-"grade" correspondence table, where you can look up grades directly by name without any increase in lookup time, regardless of the table size. You can create a Map in JavaScript as follows:

let m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

Initializing a Map requires a two-dimensional array or can start as an empty Map. A Map has the following methods:

let m = new Map(); // Empty Map
m.set('Adam', 67); // Add new key-value
m.set('Bob', 59);
m.has('Adam'); // Check if key 'Adam' exists: true
m.get('Adam'); // 67
m.delete('Adam'); // Delete key 'Adam'
m.get('Adam'); // undefined

Since a key can only correspond to a single value, setting a value for a key multiple times will overwrite the previous value:

let m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set ​

A Set is similar to a Map but is a collection of keys without storing values. Since keys cannot be duplicated, a Set cannot contain duplicate keys.

To create a Set, you can provide an Array as input or directly create an empty Set:

let s1 = new Set(); // Empty Set
let s2 = new Set([1, 2, 3]); // Contains 1, 2, 3

Duplicate elements are automatically filtered out in a Set:

let s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

Note that the number 3 and the string '3' are treated as different elements.

You can add elements to a Set using the add(key) method. You can add the same element multiple times, but it won't have any effect:

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // Still Set {1, 2, 3, 4}

You can delete elements using the delete(key) method:

let s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

Summary ​

Map and Set are new data types introduced in the ES6 standard. Depending on your browser's support, consider whether to use them.