JS new map() 基本使用

1、Map是什么

Map类型是键值对的有序列表，而键和值都可以是任意类型

Map与Set的区别

• Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

  集合-----是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合
  字典-----是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同

• Set集合是以[值，值]的形式存储元素，
  Map字典是以[键，值]的形式存储

2、Map的使用

2.1 size

size属性返回 Map 结构的成员总数。

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

maps.size // 2

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

设置键名key对应的键值为value，然后返回整个 Map 结构

如果key已经有值，则键值会被更新，否则就新生成该键

同时返回的是当前Map对象，可采用链式写法

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

get方法读取key对应的键值 value，如果找不到key，返回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()

has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中

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()

delete方法删除某个键，返回true。如果删除失败，返回false

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

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

2.5 clear()

clear方法清除所有成员，没有返回值

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

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

3、遍历

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回所有成员的遍历器
• forEach()：遍历 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 
});

参考链接：https://mp.weixin.qq.com/s/rNagDuBmJSms-R0EXiaLmQ