Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use the Map function of the new ES6 data structure". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope that this article "how to use the Map function of the new ES6 data structure" can help you solve the problem.

New data structure Map

The essence of an object in JavaScript is a collection of key-value pairs, but keys can only be strings. In order to make up for this deficiency, ES6 brings a new data structure, Map. Map is also a collection of key-value pairs, except that keys can be not only strings but also other data types, such as objects (isn't that amazing). Take a look at the following example.

Var m = new Map (); var ul = document.getElementsByTagName ('ul'); m.set (ul,'hi'); console.log (m.get (ul)); / / hi

There are several operations for Map:

M.set (ul,'content'); / / add member m.get (ul) to Map; / / get the value m.has (ul) corresponding to key ul; / / return Boolean value to determine whether there is a key ulm.delete (ul); / / delete key ul, return true for success, return falsem.size / / return m-length m.clear () for failure; / / clear all m members

The method of assigning an initial value to Map directly:

Var m = new Map ([[li_1,'hello'], [li_2,'world']])

The accepted parameter is an array, and the members of the array are an array that represents a key-value pair. If you are confused, take a look at the actual execution of the uplink code:

Var li_1 = document.getElementsByTagName ('li') [0]; var li_2 = document.getElementsByTagName (' li') [1]; var list = [[li_1,'hello'], [li_2,'world']]; var m = new Map (); list.forEach (([key,value]) = > m.set (key,value)); console.log (m.get (li_1)); / / hello

If you assign a value to a key multiple times, the subsequent value overrides the previous value. It is worth noting that when the key is an object, the reference must be the same before the key is considered to be the same. The traversal method of Map is described below.

Var ul = document.getElementsByTagName ('ul'); var li_1 = document.getElementsByTagName (' li') [0]; var li_2 = document.getElementsByTagName ('li') [1]; var list = [li_1,'hello'], [li_2,'world']]; var m = new Map (); list.forEach (([key,value])) = > m.set (key,value); for (let key of m.keys ()) {console.log (key) } for (let val of m.values ()) {console.log (val);} for (let item of m.entries ()) {console.log (item [0], item [1]);} for (let [key,val] of m.entries ()) {console.log (key,val);} m.forEach (function (val, key, ul) {console.log (this); / / ul console.log (val, key);}, ul) / / the second parameter of forEach is used to change the this point in the anonymous function.

Conversion between Map and other data types

The easiest way for Map to transfer data is to use... Extension operator. For example:

Console.log (... m); / / [li, "hello"] [li, "world"]

When Map converts an object, all keys must be strings, using the Object.create () function. When Map transforms to JSON, it also requires that all keys are strings, using the JSON.Stringify () function.

This is the end of the introduction on "how to use the Map function of ES6's new data structure". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.