Basic concepts and common methods of Map mapping in ECMAScript6

What is a Mapping
Difference between Object and Map
Map Common Methods

Declare and initialize
Assignment set
Get key value
Delete key value delete
Determine whether the key value exists has
Get all key values()
key/value iterator entries()
Iterate over all key values forEach(callback)
Clear all key values in Map clear()

Conversion to and from other data structures

Map to array
Map mapping to object
Array to Map
Object to Map
Map to JSON

Summarize

Map is a data structure introduced in the ECMAScript 6 specification. This is a convenient way to store lists of key-value pairs, similar to dictionaries or hash tables in other programming languages.

What is a Mapping

Javascript objects are essentially collections of key-value pairs (Hash structures), but traditionally only strings can be used as keys, which greatly limits their use. To solve this problem, ECMAScript 6 introduced the Map data structure. It is similar to an object and is also a collection of key-value pairs, but the scope of "key" is not limited to strings, but all types of values (including objects) can be used as keys. In other words, the Object structure provides a "string-value" correspondence, while the Map structure provides a "value-value" correspondence, which is a more complete implementation of the Hash structure.

Let's take a look at a simple example to understand the basic usage of Map:

//Declare a map instance const page_info = new Map()
// Add elements to the map page_info.set("seo", {
    "keywords": "devpoint、Map",
    "description":"The Map object is a simple key/value mapping, where the keys and values can be anything (primitive or object)"
})
page_info.set("title", "javascript es6 map")
console.log(page_info) 
console.log(typeof page_info) // object

The output is:

Map {
  'seo' => {
    keywords: 'devpoint、Map',
    description: 'The Map object is a simple key/value mapping where the keys and values can be anything (primitive or object values)'
  },
  'title' => 'Map mapping of javascript es6'
}
object

Judging from the output results, Map is essentially an object.

Difference between Object and Map

The similarities between Object and Map are that both store and retrieve a value by key, and keys can be deleted. It can be seen that the two are very similar, the difference is that:

Map Common Methods

Commonly used Map methods include: assigning set(key, value), getting get(key), removing the specified key name and its corresponding value delete(key), checking whether has(key) exists, getting all values values(), key/value iterator entries(), traversal forEach() and clearing all key/value pairs clear(), etc.

Declare and initialize

const new_map = new Map();
console.log(new_map); //Output: Map {}

Assignment set

Assignment uses map.set(key,value), which can be used to add new key/value pairs or modify key/value pairs and return the entire Map object.

const page_info = new Map()
// Set the value page_info.set("seo", {
    "keywords": "devpoint、Map",
    "description":"The Map object is a simple key/value mapping, where the keys and values can be anything (primitive or object)"
});
console.log(page_info);
page_info.set("seo", "seo information");
console.log(page_info);

The examples above increment the value, and modify the value.

Map {
  'seo' => {
    keywords: 'devpoint、Map',
    description: 'The Map object is a simple key/value mapping where the keys and values can be anything (primitive or object values)'
  }
}
Map { 'seo' => 'seo information' }

Get key value

Use get(key) to get the key value. If the obtained key->value does not exist, it returns undefined.

const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
const title = page_info.get("title");
const seo_info = page_info.get("seo");
console.log(title); //javascript es6 map mapping console.log(seo_info); //undefined

Delete key value delete

map.delete(key) deletes the key-value pair of the specified key and returns a success or failure result. If the deletion is successful, true is returned; otherwise, false is returned.

const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
page_info.set("author", "devpoint");
console.log(page_info); // Map { 'title' => 'javascript es6 map mapping', 'author' => 'devpoint' }

const deleted_author = page_info.delete("author");
const deleted_seo = page_info.delete("seo");
console.log(deleted_author); // true
console.log(deleted_seo); // false
console.log(page_info); // Map { 'title' => 'javascript es6 map mapping' }

Determine whether the key value exists has

Use map.has(key) to check whether the specified key exists.

const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
console.log(page_info); // Map { 'title' => 'javascript es6 map mapping' }

console.log(page_info.has("title")); // true
console.log(page_info.has("seo")); // false

Get all key values()

const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
page_info.set("author", "devpoint");
console.log(page_info.values()); // [Map Iterator] { 'javascript es6 map mapping', 'devpoint' }

key/value iterator entries()

Use map.entries() to return an Iterator that contains each [key, value] array in the Map object.

const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
page_info.set("author", "devpoint");
console.log(page_info.entries());

The output is:

[Map Entries] {
['title', 'Map mapping of javascript es6'],
[ 'author', 'devpoint' ]
}

Iterate over all key values forEach(callback)

const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
page_info.set("author", "devpoint");
page_info.forEach((value,key)=>{
    console.log(key,value);
});

The output is:

title javascript es6 map mapping
author devpoint

Clear all key values in Map clear()

Use map.clear() to clear all key-value pairs in the Map.

const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
page_info.set("author", "devpoint");
page_info.clear();
console.log(page_info); // Map {}

Conversion to and from other data structures

Map to array

The most convenient way to convert a Map to an array is to use the spread operator...

const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
page_info.set("author", "devpoint");
console.log([...page_info]); // [ [ 'title', 'javascript es6 map mapping' ], [ 'author', 'devpoint' ] ]

Map mapping to object

function mapToObj(map) {
    const obj = Object.create(null);
    map.forEach((v,k)=>{
        obj[k] = v;
    });
    return obj;
}
const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
page_info.set("author", "devpoint");

console.log( mapToObj(page_info));

The output is:

[Object: null prototype] {
title: 'Map mapping of javascript es6',
author: 'devpoint'
}

Array to Map

Simply pass the array into the Map constructor, ie new Map(array).

const page_info = [
    ["title","Map mapping of javascript es6"],
    ["author","devpoint"]
];
console.log(new Map(page_info)); // Map { 'title' => 'javascript es6 map mapping', 'author' => 'devpoint' }

Object to Map

Objects are converted to Maps through Object.entries().

const page_info = {
    title:"Map mapping of javascript es6",
    author:"devpoint"
};
console.log(new Map(Object.entries(page_info))); // Map { 'title' => 'javascript es6 map mapping', 'author' => 'devpoint' }

Map to JSON

To convert Map to JSON, first convert the Map to an object, i.e. mapToObj above, and then use the JSON.stringify method

function mapToObj(map) {
    const obj = Object.create(null);
    map.forEach((v,k)=>{
        obj[k] = v;
    });
    return obj;
}
function mapToJson(map){
    return JSON.stringify(mapToObj(map));
}
const page_info = new Map();
page_info.set("title", "javascript es6 map mapping");
page_info.set("author", "devpoint");
console.log( mapToJson(page_info)); // {"title":"javascript es6 map mapping","author":"devpoint"}

Summarize

This concludes this article about the basic concepts and common methods of Map mapping in ECMAScript6. For more relevant content about Map mapping in ECMAScript6, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: