JavaScript---ES6 map collection structure detailed

Source: Internet
Author: User
Tags iterable

Mapobject to hold the key-value pair. Any value (object or original value) can be either a key or a value.

New Map ([iterable])
iterable can be an array or other iterable object whose element is either a key-value pair or an array of two elements. Each key-value pair will be added to the new Map. nullwill be treated undefined。

A Map object iterates its elements in an insertion order-a for...of loop returns an [Key,value] array for each iteration.

equality of keys (key equality)

The comparison of keys is based on the "Samevaluezero" algorithm: NaN is the NaN same as the (although NaN !== NaN ), all remaining values are judged equal based on the results of the = = = operator. In the current ECMAScript specification, -0 and +0 is considered equal, although this is not the case in earlier drafts. For more information, see "Value equality for-0 and 0" in the browser compatibility table.

Comparison of Objects and maps

ObjectAnd Map Similarly, they allow you to press the key to access a value, delete a key, and detect if a key is bound to a value. So (and there's no other built-in alternative) in the past we've been using objects for Map use. However Map Object , there are some important differences that Map will be a better choice in the following situations:

    • The key of an object can be either 字符串 Symbols , but a Map key may be any value , including functions, objects, and basic types.
    • You can size get a number of key-value pairs directly from the property Map , and Object the number of key-value pairs can only be calculated manually.
    • Mapis iterative, and Object the iteration needs to get its key array first and then iterate.
    • ObjectHave their own prototypes, so the key names on the prototype chain may conflict with the key names on the object. Although ES5 can initially be used map = Object.create(null) to create an object without prototypes, this usage is less common.
    • MAP has some performance advantages in scenarios involving frequent or deleted key-value pairs.
The value of the property length is 0.
get Map[@@species]
This constructor is used to create a derived object.
represents Map the prototype of the constructor. Allows you to add properties so that they apply to all Map objects.

所有的 MapObject instances will inherit Map.prototype .

Returns a function that creates a prototype of an instance. The default is the Map function.
returns the number of key/value pairs for the map object.
removes all key/value pairs from the Map object.
removes any value associated with the key, and returns the value that was previously returned by Map.prototype.has (key) to true. Subsequent calls to Map.prototype.has (key) will return false.
returns a new Iterator [key, value] object that contains each element of the map object in the order in which it was inserted 数组 .
Map.prototype.forEach(callbackFn[, thisArg])
Map callbackfn function is called once for each key-value pair in the object, in order of insertion. If Thisarg is provided for foreach, it will be the this value in each callback.
returns the value corresponding to the key, or returns undefined if it does not exist.
returns a Boolean value that indicates whether the map instance contains a value corresponding to the key.
returns a new Iterator object that contains the keys for each element in the map object, in the order in which they are inserted.
Map.prototype.set(key, value)
sets the value of the key in the Map object. Returns the Map object.
returns a new Iterator object that contains the value of each element in the map object in the order in which it was inserted.
returns a new Iterator [key, value] object that contains each element of the map object in the order in which it was inserted 数组 .
Exampleworking with mapped objects
1 varMyMap =NewMap ();2  3 varKeyobj = {},4Keyfunc =function () {},5keystring = "a string";6  7 //add key8Mymap.set (KeyString, "and key ' a string ' associated value");9Mymap.set (Keyobj, "and key keyobj associated values");TenMymap.set (Keyfunc, "and key keyfunc associated values"); One   AMymap.size;//3 -   - //Read Value theMymap.get (keystring);//"and key ' a string ' associated value" -Mymap.get (Keyobj);//"and key keyobj associated value" -Mymap.get (Keyfunc);//"and key Keyfunc associated value" -   +Mymap.get ("a string");//"and key ' a string ' associated value" -                          //because keystring = = = ' A string ' +Mymap.get ({});//undefined, because Keyobj!== {} AMymap.get (function() {})//undefined, because keyfunc!== function () {}
use Nan as the mapped key

NaNIt can also act as a key to the map object. Although it NaN is not even equal to any value ( NaN !== NaN return True), the following example shows that 两个NaN there is no difference as a key to a map:

1 var New Map (); 2 mymap.set (NaN, "not a number"); 3 4 // "Not a number" 5 6 var othernan = number ("foo"); 7 // "Not a number"
using for..of method Iteration Mappings

Mappings can also be usedfor..of循环来实现迭代:

1 varMyMap =NewMap ();2Mymap.set (0, "zero");3Mymap.set (1, "one");4  for(var[key, value] of MyMap) {5Console.log (key + "=" +value);6 }7 //A two log will be displayed. One is "0 = zero" and the other is "1 = single"8 9  for(varKey of Mymap.keys ()) {Ten Console.log (key); One } A //A two log will be displayed. One is "0" and the other is "1. " -  -  for(varvalue of Mymap.values ()) { the Console.log (value); - } - //A two log will be displayed. One is "zero" and the other is "single. " -  +  for(var[key, value] of mymap.entries ()) { -Console.log (key + "=" +value); + } A //A two log will be displayed. One is "0 = zero" and the other is "1 = single"
using forEach() method Iteration Mappings

Mapping can also be done byforEach()方法迭代:

1 mymap.foreach (function(value, key) {2   console.log (key + "=" + value); 
    3}, MyMap)4//  will display two logs. One is "0 = zero" and the other is "1 = single"
mapping the relationship to an array object
1 varKvarray = [["Key1", "value1"], ["Key2", "value2"]];2 3 //convert a two-dimensional key-value array object into a mapping relationship using the general constructor of the map object4 varMyMap =NewMap (kvarray);5 6Mymap.get ("Key1");//The return value is "value1"7 8 //Use the expand operator to convert a mapping relationship into a two-dimensional key-value array Object9Console.log (Uneval ([... myMap]));//The same array will be shown to you and KvarrayTen  One //or use the expand operator on a key or value iterator to get a key or a worthwhile array AConsole.log (Uneval ([... Mymap.keys ()]));//output ["Key1", "Key2"]

JavaScript---ES6 map collection structure detailed

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.