面试高频的ES6中的Map和Set数据结构详解

Map

ES6之前我们需要存储键值对的集合时，只能使用对象作为映射，但对象作为映射的主要缺点是不能使用非字符串值作为键。

看看下面例子：

const obj  = { name:'yxz'},
      obj1 = {name:'yzz'}
​
const res = {}
​
res[obj] = 'hello'
res[obj1] = 'hey'
​
res[obj]   // 'hey'
res[obj1]  // 'hey'
复制代码

因为obj和ojb1两个对象字符串化都是[object Object]，所以res对象相当于设置了一个key，而后面的赋值把前面的覆盖掉了。

而ES6新增了一个数据结构map(...)，它的key和传统对象的key的区别是：map(...)的key可以是任意类型的，而传统对象的key只能是字符串类型。

用法

const obj = {
   name:'刘德华'
}
​
const obj1 ={
   name:'黎明'
}
​
const m = new Map()
​
// 设置一对值
m.set(obj,'ldh')
m.set(obj1,'lm')
​
// 读取值
m.get(obj)  // 'ldh'
m.get(obj1) // 'lm'
复制代码

注意这里不能像对象那样使用 [] 来获取key的值，但同等可以使用get(...) 方法来获取。

从map中删除一个元素

需要从map中删除一个元素，不能像对象那样使用delete操作符，取而代之的是delete(...)方法。

const x = {
  name:'张学友'
}
​
const y = {
  name:'周星驰'
}
​
const m = new Map()
​
// 设置一对值
m.set(x,'zxy')
m.set(y,'zxc')
// 集合里元素个数
m.size. // 2
// 删除一个元素
m.delete(x)   
// 集合里元素个数
m.size  // 1
复制代码

清空map中的所有元素

const x = {
  name:'张学友'
}
​
const y = {
  name:'周星驰'
}
​
const m = new Map()
​
// 设置一对值
m.set(x,'zxy')
m.set(y,'zxc')
​
m.size.  // 2
m.clear()
m.size.  // 0
复制代码

map(...)构造器也可以接受一个iterable，这个迭代器必须产生一列数组，每个数组的第一个元