New feature 5 of ES6: Data Structure instance analysis of Set and Map, and es6 instance analysis

New feature 5 of ES6: Data Structure instance analysis of Set and Map, and es6 instance analysis

This example describes the data structure of Set and Map in feature 5 of ES6. We will share this with you for your reference. The details are as follows:

1. Set

① Definition: itSimilar to arrayBut the Member values are unique and there are no repeated values. Set itself is a constructor used to generate the Set data structure.

var s = new Set();[2,3,5,4,5,2,2].map(x => s.add(x))console.log(s); //Set { 2, 3, 5, 4 }

② Attributes and Methods

The Set structure has the following attributes.

Set.prototype.constructor: Constructor. The default value is the Set function.
Set.prototype.size: Returns the total number of Set members.

The following methods are available for the Set data structure.

add(value): Add a value and return the Set structure.
delete(value): Delete a value. A boolean value is returned, indicating whether the deletion is successful.
has(value): Returns a Boolean value indicating whether the value is a Set member.
clear(): Clear all members without returning values.

Var s = new Set (); s. add (1 ). add (2 ). add (2); // note that 2 is added to the console twice. log (s. size) // 2console. log (s. has (1) // trueconsole. log (s. has (2) // trueconsole. log (s. has (3) // falseconsole. log (s. delete (2); console. log (s. has (2) // false

③ The Array. from method can convert the Set structure into an Array.

Var items = new Set ([1, 2, 3, 4, 5]); var arr = Array. from (items); // use: the method for removing repeated elements in the array var array = [,]; function fun (Array) {return array. from (new Set (array);} console. log (fun (array); // [1, 2, 3, 4]

④ The Set structure has a values method and returns a traversal.

Var s = new Set ([1, 2, 3, 4, 5]); console. log (s. values (); // SetIterator {1, 2, 3, 4, 5} // The default traversal of the Set structure is its values method console. log (Set. prototype [Symbol. iterator] = Set. prototype. values) // true // so you can directly use for traversal... offor (let x of s) {console. log (x);} // due to the extended operator (...) internal use... of loop to convert the Set into an array. Var arr = [... s]; console. log (arr); // [1, 2, 3, 4, 5]

⑤ Set structure foreach Method

var set = new Set([1, 2, 3]);set.forEach(function(value,key){  console.log(value);});

⑥ The Set structure also has the keys and entries methods. The key name of each value is the key value.

let set = new Set(['red', 'green', 'blue']);for ( let item of set.keys() ){  console.log(item);}// red// green// bluefor ( let [key, value] of set.entries() ){  console.log(key, value);}// red, red// green, green// blue, blue

7. Application of map and filter methods for Arrays

map(x){}: Traverses the array, processes each element, and returns the processed array.
filter(x){}: Traverses the array, verifies each element, and returns an array containing verified elements.

Var set = new Set ([1, 2, 3]); set = new Set ([... set]. map (x => x * 2); console. log (set); // return the Set structure: {2, 4, 6} var set = new Set ([1, 2, 3, 4, 5]); set = new Set ([... set]. filter (x => (x % 2) = 0); console. log (set); // return the Set structure: {2, 4}

2. Map

① Cause: JavaScript objects are essentially a set of key-value pairs, But strings can only be used as keys.

② Definition: it is similar to an object and also a set of key-value pairs. However, the "key" range is not limited to strings. All types of values (including objects) can be used as keys.

③ Attributes and Methods

size: Total number of returned Members.
set(key, value): Set the key value corresponding to the key, and then return the entire Map structure. If the key already has a value, the key value is updated. Otherwise, the key is generated.
get(key): Read the key value corresponding to the key. If the key cannot be found, undefined is returned.
has(key): Returns a Boolean value indicating whether a key is in the Map data structure.
delete(key): Deletes a key and returns true. If the deletion fails, false is returned.
clear(): Clear all members without returning values.

④ Similar to set, map can be created using array parameters, but the elements of the array are arrays representing key-value pairs.

Var map = new Map (); var map1 = new Map ([["name", "Zhang San"], ["title", "Author"]); console. log (map1.size) // 2

⑤ Only the reference to the same object can be considered as the same key in the Map structure. As long as the memory address is different, it is considered as two keys.

Var map = new Map (); map. set (['a'], 555); console. log (map. get (['a']) // undefinedvar k1 = ['a']; // although the values are the same, this is a new value and the memory address is different, var k2 = ['a']; map. set (k1, 111); map. set (k2, 222 );

6. Traverse

The default traversal interface (Symbol. iterator attribute) of the Map structure is the entries method.

keys(): Indicates the iterator of the Return key name.
values(): Returns the iterator of the key value.
entries(): Returns the traversal of all members.

console.log(Map[Symbol.iterator] === Map.entries)//truelet map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);console.log([...map.keys()]);//[ 1, 2, 3 ]console.log([...map.values()]);//[ 'one', 'two', 'three' ]console.log([...map.entries()]);//[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]console.log([...map]);[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]

7. Map also has a forEach Method for traversing.

Similar to set, map can combine the map and filter methods of arrays to implement Map traversal and filtering.

I hope this article will help you design the ECMAScript program.