Map and Set in ES6

1,Map

Map objects are stored as key value pairs, and their keys and values can be of any type

• Creation of Map

  // Create an empty Map
  let map  = new Map();
  //Use a two-dimensional array to create a non empty Map
  let map2 = new Map([
      ["name","Li Si"],
      ["age",12],
      [{},123],
      [12,8]
  ]);
  console.log(map2);//Map(4)   {'name' = > 'Li Si', 'age' = > 12, {...} = > 123, 12 = > 8}

  

• Properties and operation methods of Map

one   set(key,value): add a new element to return the current Map

2. get(key): read the key value corresponding to the key. If the key cannot be found, return undefined.

3. has(key): check whether the Map contains an element and return a Boolean value

4. delete(key): returns true if an element is deleted successfully, or false if the key does not exist or deletion fails

5. clear(): clear the Map set and return undefined

6. The size attribute returns the number of Map elements

  let map  = new Map();
  //The set method can add multiple elements at the same time (chain writing)
  map.set(0,"zero")
      .set(1,"one")
      .set("first","all");
  console.log(map);//Map(3) {0 => 'zero', 1 => 'one', 'first' => 'all'}
  
  // If the same key name is assigned multiple times, the subsequent value will overwrite the previous value.
  map.set("one","Zhang San")
      .set("two","Li Si")
      .set("two","Wang Wu")
      .set("change",function(){});
  console.log(map);//Map (3) {'one' = > 'Zhang San', 'two' = > 'Wang Wu', 'change' = > ƒ}
  
  //get method
  console.log(map.get("change"));//ƒ (){}
  console.log(map.get("three"));//undefined
  
  //has method
  console.log(map.has("one"));//true
  console.log(map.has(11));//false
  
  //delete
  console.log(map.delete("one"));//true
  console.log(map.delete("ooo"));//false
  
  //clear
  console.log(map.clear());//undefined
  
  //size attribute
  console.log(map.size);//3

• Traversal method of Map

1. keys(): the iterator that returns the key name.

2. values(): the iterator that returns the key value

3. entries(): returns the traversal of all members

4. forEach(): traverse all members of the Map

  //Traversal key name
  for (let key of map.keys()) {
      console.log(key);//one two change
  }
  //Traverse key value
  for (let value of map.values()) {
      console.log(value);//Zhang Sanwang Wuyi () {}
  }
  //Traverse all members
  for (let [key,value] of map.entries()) {
      console.log(key,value);//one Zhang San two Wang Wu change {}
  }
  //Traverse all members
  for (let [key,value] of map) {
      console.log(key,value);//one Zhang San two Wang Wu change {}
  }
  //forEach
  map.forEach((value,key)=>{
      console.log(key,value);//one Zhang San two Wang Wu change {}
  })

2,Set

A Set collection is similar to an array, but all members are unique

• Set creation

  //Create an empty Set
  let set = new Set();
  //Create a non empty Set
  //Unlike Map, array is a one-dimensional array, and each element will become the value of set
  let set2 = new Set(["one","two","three","four","five"]);
  console.log(set2);//Set(5) {'one', 'two', 'three', 'four', 'five'}

• Operation method of Set instance

1.constructor: constructor, which is Set function by default

2.size: returns the total number of members of the Set instance

3.add(value): add a value and return the Set structure itself

4.delete(value): deletes a value and returns a Boolean value indicating whether the deletion is successful

5.has(value): returns a Boolean value indicating whether the value is a member of Set

6.clear(): clear all members

  let set = new Set();
  //add
  set.add("one")
      .add("two");
  console.log(set);//Set(2) {'one', 'two'}
  //Adding an element to set and passing in multiple parameters at the same time will only add the first one
  set.add(1, 2, 3);
  console.log(set);//Set(1) {1}
  
  //delete
  console.log(set.delete('one'));//true
  
  //has
  console.log(set.has('one'));//false
  console.log(set.has('two'));//true
  
  //clear
  console.log(set.clear());//undefined
  console.log(set);//Set(0) {size: 0}

• Traversal method of Set

1.keys(): the traverser that returns the key name

2.values(): the traverser that returns the key value

3.entries(): returns the traversal of key value pairs

4.forEach(): use the callback function to traverse each component

  The traversal order of Set is the insertion order. The Set structure has no key name but only the key value (or the key name and key value are the same value), so the behaviors of keys method and values method are exactly the same.

  The traversal method of Set is similar to that of Map

• Array de duplication

  //Array de duplication
  //1. Use the extension operator [...]
  let set = new Set([1,2,3,5,4,3,2,1,0]);
  console.log([...set]);//[1, 2, 3, 5, 4, 0]
  //2,Array.from()
  let result = Array.from(set);
  console.log(result);//[1, 2, 3, 5, 4, 0]

• Union, Intersect, and Difference

  let a = new Set([1,2,3]);
  let b = new Set([4,3,2]);
  //Union
  let union = new Set([...a,...b]);
  console.log(union);//Set(4) {1, 2, 3, 4}
  
  //intersection
  let intersect = new Set([...a].filter(x => b.has(x)));
  console.log(intersect);//Set(2) {2, 3}
  
  //(a is equivalent to the difference set of b)
  let difference = new Set([...a].filter(x => !b.has(x)));
  console.log(difference);//Set(1) {1}

  be careful  : These two sets are ordered, and the order in which elements are added is the order in which they are saved internally. The same is true for sets initialized with arrays, which are added to the set in turn according to their positions in the array