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

In this article Xiaobian introduces in detail "how to use js's Map function", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use js's Map function" can help you solve your doubts.

Map is a Global Object introduced by ES2015.

Key-value pairs are saved in the Map object, and any object (including the original value) can be used as a key or value.

1. Constructor function

Map must be used as a constructor

New Map ([iterable])

Its parameters are optional and, if provided, must be an iterable object.

The iterative result of the iterable object is, [key1, value1], [key2, value2],...

For example

/ / 1. The array is an iterable object m = new Map ([[1,'a'], [2,'b']); / / Map (2) {1 = > "a", 2 = > "b"} / / 2. Generator returns an iterable object gen = function* () {yield [1,'a']; yield [2,'b'];} iter = gen (); m = new Map (iter) / / Map (2) {1 = > "a", 2 = > "b"} 2. Instance property

The number of key used by m.size to obtain

M = new Map ([[1,'a'], [2,'b']); / / Map (2) {1 = > "a", 2 = > "b"} m.size / / 23. Example method

(1) m.has (key) to determine whether key exists

(2) m.get (key), which returns undefined (3) m.set (key, value) if there is no this key, sets a value, returns m (4) m.delete (key), returns true if key exists and has been deleted, and returns false if key does not exist.

(5) m.clear (), delete all key-value pairs

(6) m.keys (), which returns an iterable object containing all key iterated in insertion order

M = new Map ([[1,'a'], [2,'b']); / / Map (2) {1 = > "a", 2 = > "b"} [... m.keys ()] / / [1,2]

(7) m.values (), which returns an iterable object containing all value iterated in insertion order

M = new Map ([[1,'a'], [2,'b']); / / Map (2) {1 = > "a", 2 = > "b"} [... m.values ()] / / [a "," b "]

(8) m.entries (), which returns an iterable object. Each element is [key, value]. The traversal order is in the order of key insertion.

M = new Map ([[1,'a'], [2,'b']); / / Map (2) {1 = > "a", 2 = > "b"} [... m.entries ()] / [[1, "a"], [2, "b"]]

Note: a more convenient way to get a two-dimensional array is to use Array.from, which can directly accept Map as a parameter

M = new Map ([[1,'a'], [2,'b']); / / Map (2) {1 = > "a", 2 = > "b"} Array.from (m) / / [[1, "a"], [2, "b"]]

Array.from can also accept iterable objects

Array.from (m.keys ()) / / [1,2] Array.from (m.values ()) / / ["a", "b"] Array.from (m.entries ()) / / [[1, "a"], [2, "b"]]

(9) m.forEach (fn [, thisArg]), which is used to traverse the Map in the order in which key is inserted

M = new Map ([[1,'a'], [2,'b']); / / Map (2) {1 = > "a", 2 = > "b"} m.forEach ((value, key) = > {value / / "a", "b" key / / 1,2})

Note: the first parameter is value, and the second parameter is key.

In addition to using m. ForEachMagneMap, you can also use for... Of for traversal

M = new Map ([[1,'a'], [2,'b']); for (i of m) {I / / [1,'a'], [2,'b']} 4. Equality judgment of key

The equality judgment of Map key uses the so-called "SameValueZero" algorithm:

(1) when judging the equality of key, NaN is considered to be equal to NaN. (even if NaN! = = NaN)

(2) other kinds of key are judged by the = = operator.

(3) currently, + 0 and-0 are considered to be equal to the ES2015 specification, but there will be browser compatibility issues.

5. Comparison between Map and Object

(1) the key of Object can only be a string (String) or symbol (Symbol)

The key of Map can be any value, including a function, an object (object), or any original value (primitive value).

(2) for Map, the number of key can be obtained directly through the size attribute.

Object requires Object.keys (xxx) .length to indirectly get the number of its own attributes.

(3) Map instance is an iterable object, which can be directly used to traverse

Object needs to get its key first, and then use key to traverse.

(4) Object can have prototype objects, and its own attributes may inadvertently conflict with prototype attributes.

(although Object.create (null) can be used in ES2015 to create an object without a prototype. )

(5) the addition and deletion of Map key is more efficient.

After reading this, the article "how to use the Map function of js" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, please follow the industry information channel.

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.