Basic use of JS new map()

1. What is Map

The Map type is an ordered list of key-value pairs , while键和值都可以是任意类型

The difference between Map and Set

• Set is a data structure called a collection, and Map is a data structure called a dictionary

  A collection ----- is a combination of a bunch of unordered, associated, and non-repeating memory structures [called elements in mathematics]. A dictionary
  ----- is a collection of some elements. Each element has a field called key, and the keys of different elements are different

• The Set collection stores elements in the form of [value, value], and
  the Map dictionary stores elements in the form of [key, value]

2. The use of Map

2.1 size

The size property returns the total number of members of the Map structure.

const maps = new Map();
maps.set('foo', true);
maps.set('bar', false);

maps.size // 2

2.2 set() 设置map值 类似于 setitem 

Set the key value corresponding to the key name key to value, and then return the entire Map structure

If the key already has a value, the key value will be updated, otherwise the key will be newly generated

At the same time, the current Map object is returned, which can be written in chain

const maps = new Map();
let fn = function(){}

maps.set('edition', 6)        // 键是字符串
maps.set(fn, 'standard')     // 键是函数
maps.set(undefined, 'nah')    // 键是 undefined
maps.set(1, 'a').set(2, 'b').set(3, 'c') // 链式操作

2.3 get() 获取map值 类似于 getItem

The get method reads the key value corresponding to the key, if the key cannot be found, returns undefined

var maps = new Map(); 

// 类似于getItem  setitem
maps.set(1,"jQuery") // set设置maps
maps.get(1)  // 打印出来的结果就是“jQuery”

  // 定义 map
      const tagMap = new Map([
        ["inputEQUAL", "inputName"],
        ["datebetween", "inputDatePicker"],
      ]);

      // 输出结果
      let Type = date;
      let Keywords = between;
      console.log(tagMap.get(Type + Keywords)); // 输出 inputDatePicker
      console.log(tagMap.get(inputEQUAL)); // 输出inputName

2.4 has()

The has method returns a Boolean value indicating whether a key is in the current Map object

const maps = new Map();

maps.set('edition', 6);
maps.set(262, 'standard');
maps.set(undefined, 'nah');

maps.has('edition')     // true
maps.has('years')       // false
maps.has(undefined)     // true

2.4 delete()

The delete method deletes a key and returns true. Returns false if deletion failed

const maps = new Map();
maps.set(undefined, 'nah');
maps.has(undefined)     // true

maps.delete(undefined)
maps.has(undefined)       // false

2.5 clear()

The clear method clears all members and has no return value

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

3. Traverse

• keys(): returns a traverser of key names
• values(): returns a traverser of key values
• entries(): returns a traverser for all members
• forEach(): traverse all members of the Map

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

//keys()
for (let key of map.keys()) {
  console.log(key);       // F 、T 
}

//values()
for (let value of map.values()) {
  console.log(value);    // no、yes
}

// entries()
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// F no 、T yes 

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// F no 、T yes 

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// F no 、T yes 


map.forEach(function(value, key, map) {
  console.log(key, value, map); 
  // F no Map(2) {'F' => 'no', 'T' => 'yes'} 、 T yes Map(2) {'F' => 'no', 'T' => 'yes'}
});

map.forEach(function(value, key) {
  console.log(key, value);    // F no 、T yes 
});

Reference link: https://mp.weixin.qq.com/s/rNagDuBmJSms-R0EXiaLmQ