前言

我们知道在JS中，可以使用对象和数组来保存数据；好像也只有这两种数据结构我们可以用来存数据。为了丰富集合类型，ES6新加了Set和Map两种集合类型。接下来我们一起来了解一下吧。

Set

简述

Set是一种值的集合，Set 对象允许你存储任何类型的唯一值（即 Set 中的元素是唯一的），无论是原始值或者是对象引用，你还可以按照插入的顺序迭代它的元素。

注意:NaN 和 undefined 都可以被存储在 Set 中，NaN 之间被视为相同的值（NaN 被认为是相同的，尽管 NaN !== NaN）。

Set对象的增删改查

我们可以用add()方法来添加新的值，delete()方法来删除值，has()方法来检查是否存在某个值，以及size属性来获取集合的大小。

let  s= new Set();
s.add(1); // Set [ 1 ]
s.add(5); // Set [ 1, 5 ]
s.add(5); // Set [ 1, 5 ]
s.add("song"); // Set [ 1, 5, "song" ]
let o = {a: 1, b: 2};
s.add(o);
s.add({a: 1, b: 2}); //此对象的引用地址和o对象不同，所以不影响
s.has(1); // true
s.has(3); // false
s.has(Math.sqrt(25));  // true
s.has("Song".toLowerCase()); // true
s.has(o); // true
s.size; // 5
s.delete(5);  // true，从 set 中移除 5
s.has(5);     // false, 5 已经被移除
s.size; // 4，刚刚移除一个值
console.log(s);

上述代码放在谷歌浏览器上打印结果为：

Set是可迭代的

用for of可以遍历Set

for (let item of s) 
console.log(item);
for (let item of s.keys()) 
console.log(item);
for (let item of s.values()) 
console.log(item);

上述代码执行结果为：

按顺序输出。

可以用来数组去重

用...(展开操作符) 操作符可以将Set转换为 Array，利用Set中元素的唯一性可以达到去重的目的。

const numbers = [1,2,3,4,5,2,3,4,5,1]
console.log([...new Set(numbers)])
// [1,2,3,4,5]

Map

简述

Map 对象是键值对的集合。Map 中的一个键只能出现一次；它在 Map 的集合中是独一无二的。并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

Map使用

我们可以通过set()方法往Map中加值，通过delete()方法来删除值，size属性来获取集合的大小。

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
console.log(map.get('a'));
map.set('a', 100);
console.log(map.get('a'));
console.log(map.size);
map.delete('b');
console.log(map.size);

上述代码在谷歌浏览器执行为：

最后

Set和Map的区别

• Set 是一种集合的数据结构，Map 是一种字典的数据结构。
• Map是键值对，Set是值的集合，键和值可以是任何的值。
• Map可以通过get方法获取值，而set不能。
• Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储。