Map

JavaScript’s default object representation is {}, which is a set of key-value pairs. But the key name must be a string. But the fact that Number or some other data type is a key makes perfect sense. To address this problem, the ES6 specification introduces a new data type, Map.

  • An Object key can only be a string or a symbol, but a Map key can be any value.
  • Keys in a Map are ordered (FIFO), while keys added to objects are not.
  • The number of key-value pairs for Map can be obtained from the size property, whereas the number of key-value pairs for Object can only be calculated manually.
  • The Map key name is unique and does not duplicate. An Object has its own prototype, and the key name on the prototype chain may conflict with the key name you set on the Object.

methods

  • set(key, value)To set the value.
  • get(key), gets the value.
  • delete(key), delete the value.
  • clear(), remove all key-value pairs.
  • has(key)To check whether there is a value corresponding to the key.
  • keys(), returns all the key names in the Map object.
  • values()Returns all the keys in the Map object.
  • entries()For each element in the Map object[key, value]The array.
  • forEach(callbackFn)CallbackFn is called once for each key-value pair in the Map, in insertion order

attribute

  • sizeTo get the number of entries in the Map object.

Initialize an empty Map

const map = new Map(a);// => Map(0) {}

map.set('b'.20); // => Map(1) {"b" => 20}
map.set('a'.10); // => Map(2) {"b" => 20, "a" => 10}
map.set('c'.30); // => Map(3) {"b" => 20, "a" => 10, "c" => 30}
map.set('c'.40); // => Map(3) {"b" => 20, "a" => 10, "c" => 40}
Copy the code

You can see that maps are not arranged alphabetically like objects, but in the order in which they are added. And if the key name is duplicated, the value added later overwrites the value added earlier.

Array to the Map

The array to be converted needs to be a two-dimensional array

const arr = [['a'.10], ['b'.20], ['c'.30]].const map = new Map(arr); // => Map(3) {"a" => 10, "b" => 20, "c" => 30}
Copy the code

Turn the Map array

  1. useArray.fromconvert
const map = new Map(a);// => Map(0) {}
map.set('a'.10).set('b'.20).set('c'.30); // => Map(3) {"a" => 10, "b" => 20, "c" => 30}
const arrFromMap = Array.from(map); // => [['a',10], ['b',20], ['c',30]]
Copy the code
  1. use.convert
const map = new Map(a);// => Map(0) {}
map.set('a'.10).set('b'.20).set('c'.30); // => Map(3) {"a" => 10, "b" => 20, "c" => 30}
const arrFromMap = [...map]; // => [['a',10], ['b',20], ['c',30]]
Copy the code

Turn the Map object

const map = new Map(a);// => Map(0) {}
map.set('a'.10).set('b'.20).set('c'.30); // => Map(3) {"a" => 10, "b" => 20, "c" => 30}
const objFromMap = Object.fromEntries(map); // => {a: 10, b: 20, c: 30}
Copy the code

The Map traverse

  1. forEach
const map = new Map(a);// => Map(0) {}
map.set('a'.10).set('b'.20).set('c'.30); // => Map(3) {"a" => 10, "b" => 20, "c" => 30}
// The first argument is value and the second argument is key.
map.forEach((value, key) = >{
    // => 10 'a'
    // => 20 'b'
    // => 30 'c'
})
Copy the code
  1. for… of
const map = new Map(a);// => Map(0) {}
map.set('a'.10).set('b'.20).set('c'.30); // => Map(3) {"a" => 10, "b" => 20, "c" => 30}
// The first argument is key and the second argument is value.
for (const [key, value] of map){
    // => 'a' 10
    // => 'b' 20 
    // => 'c' 30 
}
Copy the code

Set

Map is a collection of key-value pairs, and Set is a collection of values. You can iterate over its elements in the order they were inserted. Elements in a Set occur only once, that is, the elements in a Set are unique.

methods

  • add(value)To set the value.
  • delete(value), delete the value.
  • clear(), remove all values.
  • has(value)To check whether the value exists.
  • keys(), returns all values in the Set object.
  • values(), returns all values in the Set object.
  • entries(), for each element in the Set object[value, value]The array.
  • forEach(callbackFn)CallbackFn is called once for each value in the Set, in insertion order

attribute

  • sizeGets the number of values in Set.

Initialize an empty Set

const set = new Set(a);// => Set(0) {}

set.add(20); // => Set(1) {20}
set.add(10); // => Set(2) {20, 10}
set.add(30); // => Set(3) {20, 10, 30}
set.add(30); // => Set(4) {20, 10, 30}
Copy the code

As you can see, if you add duplicate elements, only one Set remains.

An array of turning the Set

const arr = [10.20.30];
const set = new Set(arr); // => Set(3) {10, 20, 30}
Copy the code

Turn the Set array

  1. useArray.fromconvert
const set = new Set(a);// => Set(0) {}
set.add(10).add(20).add(30); // => Set(3) {10, 20, 30}
const arrFromSet = Array.from(set); // => [10, 20, 30]
Copy the code
  1. use.convert
const set = new Set(a);// => Set(0) {}
set.add(10).add(20).add(30); // => Set(3) {10, 20, 30}
const arrFromSet = [...set]; // => [10, 20, 30]
Copy the code

You can use Set to deprocess one-dimensional arrays

const numbers = [2.3.4.4.2.3.3.4.4.5.5.6.6.7.5.32.3.4.5];
const output = [...new Set(numbers)]; // => [2, 3, 4, 5, 6, 7, 32]
Copy the code

The Set traversal

  1. forEach
const set = new Set(a);// => Set(0) {}
set.add(10).add(20).add(30); // => Set(3) {10, 20, 30}
set.forEach((value) = >{
    / / = > 10
    / / = > 20
    / / = > 30
})
Copy the code
  1. for… of
const set = new Set(a);// => Set(0) {}
set.add(10).add(20).add(30); // => Set(3) {10, 20, 30}
for (const value of set){
    / / = > 10
    / / = > 20
    / / = > 30
}
Copy the code

WeakMap

WeakMap only accepts objects as key names, and key values can be of any type. The key name is weakly referenced and is automatically collected by the garbage collection mechanism if no other reference exists. WeakMap does not support traversal and has no size attribute. There are only four methods: set, GET, HAS and delete.

WeakSet

WeakSet only accepts objects as values and stores them as weak references. If there are no other references to WeakSet objects, those objects will be garbage collected. WeakSet does not support traversal and has no size attribute. There are only add, HAS, and delete methods.

Reference: developer.mozilla.org/zh-CN/docs/…