TypeScript Map Object

The Map object stores key-value pairs and remembers the original insertion order of the keys.

Any value (object or primitive) can be used as a key or a value.

Map is a new data structure introduced in ES6, which can be referred to in ES6 Map and Set.

Creating a Map

TypeScript uses the Map type and the new keyword to create a Map:

let myMap = new Map();

To initialize a Map, you can pass in key-value pairs in an array format:

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]);

Functions and properties related to Map:

map.clear() – Removes all key/value pairs from the Map object.
map.set() – Sets the value for the key in the Map object, returning the Map object.
map.get() – Returns the value associated with the key, or undefined if it does not exist.
map.has() – Returns a boolean indicating whether a value has been associated with the key in the Map object or not.
map.delete() – Removes the element from the Map object by key, returning true if the element exists, false otherwise.
map.size – Returns the number of key/value pairs in the Map object.
map.keys() – Returns a new Iterator object that contains the keys of each element in the Map object.
map.values() – Returns a new Iterator object that contains the values of each element in the Map object.

Example - test.ts File

let nameSiteMapping = new Map();

// Set Map object
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("tutorialpro", 2);
nameSiteMapping.set("Taobao", 3);

// Get the value associated with the key
console.log(nameSiteMapping.get("tutorialpro"));     // 2

// Check if the Map contains the value associated with the key
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false

// Return the number of key/value pairs in the Map object
console.log(nameSiteMapping.size);                // 3

// Delete tutorialpro
console.log(nameSiteMapping.delete("tutorialpro"));    // true
console.log(nameSiteMapping);
// Remove all key/value pairs from the Map object
nameSiteMapping.clear();             // Clear the Map
console.log(nameSiteMapping);

Compile using es6:

tsc --target es6 test.ts

The compiled JavaScript code is as follows:

Example - test.js File

let nameSiteMapping = new Map();
// Set Map object
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("tutorialpro", 2);
nameSiteMapping.set("Taobao", 3);
// Get the value associated with the key
console.log(nameSiteMapping.get("tutorialpro")); // 2
// Check if the Map contains the value associated with the key
console.log(nameSiteMapping.has("Taobao")); // true
console.log(nameSiteMapping.has("Zhihu")); // false
// Return the number of key/value pairs in the Map object
console.log(nameSiteMapping.size); // 3
// Delete tutorialpro
console.log(nameSiteMapping.delete("tutorialpro")); // true
console.log(nameSiteMapping);
// Remove all key/value pairs from the Map object
nameSiteMapping.clear(); // Clear the Map
console.log(nameSiteMapping);

Executing the above JavaScript code will produce the following output:

2
true
false
3
true
Map { 'Google' => 1, 'Taobao' => 3 }
Map {}

Iterating Over a Map

Elements in a Map object are inserted in order. We can iterate over the Map object, with each iteration returning a [key, value] array.

TypeScript uses for...of to implement iteration:

Example - test.ts File

let nameSiteMapping = new Map();

nameSiteMapping.set("Google", 1);
nameSiteMapping.set("tutorialpro", 2);
nameSiteMapping.set("Taobao", 3);

// Iterate over keys in the Map
for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}

// Iterate over values in the Map
for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}

// Iterate over key => value in the Map
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}

// Using object destructuring
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}

Compile using es6:

tsc --target es6 test.ts

The compiled JavaScript code is as follows:

Example

let nameSiteMapping = new Map();
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("tutorialpro", 2);
nameSiteMapping.set("Taobao", 3);
// Iterate over keys in the Map
for (let key of nameSiteMapping.keys()) {
    console.log(key);
}
// Iterate over values in the Map
for (let value of nameSiteMapping.values()) {
    console.log(value);
}
// Iterate over key => value in the Map
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);
}
// Using object destructuring
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);
}

Executing the above JavaScript code will produce the following output:

Google
tutorialpro
Taobao
1
2
3
Google 1
tutorialpro 2
Taobao 3
Google 1
tutorialpro 2
Taobao 3

❮ Ts Array Ts Tutorial ❯