ES2015 Set与Map数据结构

Set 数据结构

ECMAScript2015 中新增了一个叫做 Set 的全新数据结构，可以理解为集合，它与传统的数组非常的类似。不过，Set 内部的成员是不允许重复的。那也就是说，每一个值在同一个 Set 当中是唯一的。

Set 是一个类型，可以通过 new Set() 构造函数创建一个实例对象。如下代码所示：

const s = new Set()

然后，再通过 Set 的实例方法 add() 向 Set 集合添加数据。如下代码所示：

s.add(1).add(2).add(3).add(4)

由于 add() 方法的返回值是 Set 集合本身，所以 add() 方法是支持链式操作的。如果向 Set 集合添加已经添加过的数据的话，那 Set 集合会忽略这次操作。如下代码所示：

s.add(1).add(2).add(3).add(4).add(2)

console.log(s)

上述代码的运行结果如下：

Set(4) { 1, 2, 3, 4 }

想要遍历集合当中的数据，可以使用 Set 集合的实例方法 forEach()。如下代码所示：

s.forEach(i => console.log(i))

上述代码的运行结果如下：

1
2
3
4

或者是也可以使用 ECMAScript2015 所新增的 for...of 循环。如下代码所示：

for (let i of s) {
  console.log(i)
}

除此之外，还可以通过 size 属性来获取 Set 集合的长度。如下代码所示：

console.log(s.size)

上述代码的运行结果如下：

4

size 属性的作用和数组当中的 length 属性是一致的。除此之外，还提供了一些比较常用的方法。如下表所示：

方法名	描述	示例
has()	用于判断 Set 集合中是否存在指定值	s.has(100)
delete()	用于删除 Set 集合中的指定值	s.delete(3)
clear()	用于清除 Set 集合中的所有值	s.clear()

Set 集合最常见的应用场景就是为数组中的成员去重。如下代码所示：

const arr = [1, 2, 1, 3, 4, 1]

const result = new Set(arr)

console.log(result)

上述代码的运行结果如下：

Set(4) { 1, 2, 3, 4 }

从上述打印结果可以看到，Set 的构造函数允许接收一个数组类型的参数, 作为 Set 集合的初始值, 重复的值会自动忽略掉。

如果还想再得到一个数组的话，可以使用 ECMAScript2015 中新增的 Array.from() 方法将 Set 集合再次转换为数据。如下代码所示：

const result = Array.from(new Set(arr))

当然，也可以使用 ... 展开运算符在一个空数组当中展开 Set 集合，这样 Set 集合中的成员就会作为这个空数组当中的成员了。如下代码所示：

const result = [...new Set(arr)]

Map 数据结构

ECMAScript2015 中还新增了一个叫做 Map 的数据结构，这种数据结构与 ECMAScript 中的对象非常类似。本质上，它们都是键值对集合，但是对象当中的键只能够是字符串类型，所以当存储一些结构复杂的数据时会存在一些问题。如下代码所示：

const obj = {}

obj[true] = 'value'
obj[123] = 'value'
obj[{
  a: 1
}] = 'value'

console.log(Object.keys(obj))

上述代码的运行结果如下：

[ '123', 'true', '[object Object]' ]

从上述的打印结果可以看到，如果使用不是字符串类型的数据作为对象的键的话，那对象内部会自动将这个数据的 toString() 后的结果作为键。

知道这样一个特点之后就能够发现问题，试想一下假设使用对象去存储每个学生的考试成绩，如果使用学生对象作为键，不管对象当中的属性有什么不同，每一个对象 toString() 过后的结果都是一样的，自然也就没有办法做到区分，ECMAScript2015 中的 Map 数据结构就是解决这样的问题的。Map 才能算是严格意义上的键值对集合，用来去映射两个任意类型数据之间的对应关系。如下代码所示：

const m = new Map()

const obj = {
  name: '前端课湛'
}

m.set(obj, 90)

console.log(m)

console.log(m.get(obj))

从上述代码中可以看到，可以通过 new Map() 构造函数创建 Map 集合的实例对象，通过 set() 方法向 Map 集合添加键值对，通过 get() 方法根据键从 Map 集合中获取对应的值。

除此之外，还提供了一些比较常用的方法。如下表所示：

方法名	描述	示例
has()	用于判断 Map 集合中是否存在指定值	m.has(100)
delete()	用于删除 Map 集合中的指定值	m.delete(3)
clear()	用于清除 Map 集合中的所有值	m.clear()

如果想要遍历 Map 集合当中所有的键值对，也可以使用 Map 集合的实例方法 forEach()。如下代码所示：

m.forEach((value, key) => {
  console.log(key, value)
})

Map 集合与对象最大的区别就在于 Map 集合允许使用任意类型的数据作为键，而对象只能使用字符串作为键。