前言

Map 对象是以key-value键值对方式存储数据的集合，类似于Object。但是两者存在极大的差异

Map键对比方式主要是以 === 进行比较，这就表明了Map的键可以是任意类型

具体说明，参考官方中文文档

Map与Object差异对比

	Map	Object
键类型	可以是任意类型	只能是String或Symbol
键顺序	有序的	无序的
获取长度	size属性	手动计算
遍历	迭代器	Object.keys()/ forin等
性能	频繁增删键值对的场景下表现更好	对于频繁增删键值对的场景下未作出优化
其他	默认情况下不包含任何键，只包含显式插入的键	键可能与原型链上同名的键冲突

Map方法

size

• 作用：获取map长度

const map = new Map()
map.set('uname', 'zhangsan')
map.set('uage', 18)
​
console.log(map.size)  // 2

set(key, value)

• 作用：添加或设置新的键值对（key不能重复，所以可用于修改）

• 参数：key 键；value 值

• 返回值：map对象

  const map = new Map()
  const result = map.set('uname', 'zhangsan')
  console.log(result)  // Map(1) { 'uname' => 'zhangsan' }
  

get(key)

• 作用：获取指定元素

• 参数：key 指定元素的键

• 返回值：指定元素的value值

  const map = new Map()
  map.set('uname', 'zhangsan')
  ​
  const value = map.get('uname')
  console.log(value) // zhangsan
  

has(key)

• 作用：判断map 中是否存在指定元素

• 参数：key 要检测的元素键

• 返回值：Boolean

  const map = new Map()
  map.set('uname', 'zhangsan')
  ​
  console.log(map.has('uname'))  // true
  console.log(map.has('test'))   // false
  

delete(key)

• 作用：删除指定元素

• 参数：key 要删除的元素键

• 返回值：Boolean

  const map = new Map()
  map.set('uname', 'zhangsan')
  ​
  const result = map.delete('uname')
  console.log(result)  // true
  console.log(map.size)  // 0
  

clear()

• 作用：清空所有元素

• 参数：无

• 返回值：无

  const map = new Map()
  map.set('uname', 'zhangsan')
  ​
  map.clear()
  console.log(map.size)  // 0
  

forEach(callback)

• 作用：遍历map

• 参数：callback(value, key, map)

  value 每次遍历的值(可选)

  key 每次遍历的键(可选)

  map 被遍历的map对象(可选)

• 返回值：无

  const map = new Map()
  map.set('uname', 'zhangsan')
  map.set('uage', 18)
  ​
  map.forEach((value, key, map) => {
      console.log(value, key);
  })
  // zhangsan uname
  // 18 uage
  

entries()

• 作用：返回一个包含[key, value]的Iterator迭代器对象，用于迭代遍历map

• 参数：无

• 返回值：Iterator对象

  const map = new Map()
  map.set('uname', 'zhangsan')
  map.set('uage', 18)
  map.set('hobby', ['唱', '跳', 'rap', '篮球'])
  map.set('desc', { country: '美国', duration: '2年半' })
  ​
  for (const iterator of map.entries()) {
    console.log(iterator instanceof Array);  // true
  }
  // 可以看到迭代项是一个数组, 那么就可以进行解构
  for (const [key, value] of map.entries()) {
    console.log(key, value);
  }
  // uname zhangsan
  // uage 18
  // hobby [ '唱', '跳', 'rap', '篮球' ]
  // desc { country: '美国', duration: '2年半' }
  

keys()

• 作用：和entries() 方法一样，唯一的区别是：返回的是只包含key的Iterator迭代器

• 参数：无

• 返回值：Iterator对象

  const map = new Map()
  map.set('uname', 'zhangsan')
  map.set('uage', 18)
  map.set('hobby', ['唱', '跳', 'rap', '篮球'])
  map.set('desc', { country: '美国', duration: '2年半' })
  ​
  for (const iterator of map.keys()) {
    console.log(key, value);
  }
  // uname
  // uage
  // hobby
  // desc
  

values()

• 作用：和entries() 方法一样，唯一的区别是：返回的是只包含value值的Iterator迭代器

• 参数：无

• 返回值：Iterator对象

  const map = new Map()
  map.set('uname', 'zhangsan')
  map.set('uage', 18)
  map.set('hobby', ['唱', '跳', 'rap', '篮球'])
  map.set('desc', { country: '美国', duration: '2年半' })
  ​
  for (const iterator of map.values()) {
    console.log(key, value);
  }
  // zhangsan
  // 18
  // [ '唱', '跳', 'rap', '篮球' ]
  // { country: '美国', duration: '2年半' }
  

多类型键测试

const map = new Map()
​
const symbolKey = Symbol('symbolKey')
const bigintKey = 123n
const dateKey = new Date()
const regKey = new RegExp(/asd/)
const functionKey = function(){}
​
map.set(1, 'asd1')
map.set(symbolKey, 'asd2')
map.set(bigintKey, 'asd3')
map.set(dateKey, 'asd4')
map.set(regKey, 'asd5')
map.set(functionKey, 'asd6')
​
console.log(map.size);
console.log(map.get(1));
console.log(map.get(symbolKey));
console.log(map.get(bigintKey));
console.log(map.get(dateKey));
console.log(map.get(regKey));
console.log(map.get(functionKey));
// 没问题

参考

Map

总结

• Map以键值对进行存储
• Map键有序
• Map键可以是任意类型
• 通过size属性获取长度
• 使用迭代器遍历元素
• 增删操作效率高（未测试，以后再说）

根据这些特性，某些场景下可用于替代Object对象，应用场景略