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)]
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 集合允许使用任意类型的数据作为键，而对象只能使用字符串作为键。
本文地址：https://blog.csdn.net/kingj_fullstack/article/details/107540509
如对本文有疑问， 点击进行留言回复！！
元素分类，块级元素，内联元素，行内块元素，displaby 属性
网友评论