Set 和 Map是 ES6 中引入的两种新的数据结构。提供了更强大和灵活的数据存储与操作方式。

Set

Set是一种集合数据结构，它允许存储任何类型的唯一值，无论是基本数据类型还是对象引用。

特点：

• 唯一性：集合中的每个值都是唯一的，重复的值会被自动忽略。

• 无序性：Set中的元素没有特定的顺序，不能通过索引来访问元素。

常用方法：

• add(value)：向Set中添加一个新元素，如果元素已存在，则不会重复添加。

• delete(value)：从Set中删除指定元素，如果元素存在则返回true，否则返回false。

• has(value)：检查Set中是否存在指定元素，存在返回true，否则返回false。

• size：返回Set中元素的数量。

基本用法：

1.创建一个Set实例并添加元素。

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // 重复元素不会被添加
console.log(mySet); // Set {1, 2}
console.log(mySet.size) //返回元素的数量： 2

2.可迭代

Set可以通过for...of循环直接迭代其值。

let mySet = new Set([1, 2, 3]);
for (let value of mySet) {
  console.log(value);
}
// 依次输出：1 2 3

3.数组去重

利用Set的唯一性对数组进行去重。

let arr = [1,2,3,4,1,8,2];
let uniqueArr = Array.from(new Set(arr))
console.log(uniqueArr) // [1,2,3,4,8]

4.交集、并集、差集运算

在处理多个数据集合的关系时，Set可以配合一些数组的方法很容易地进行交集、并集和差集等数学运算。

const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([4, 5, 6, 7, 8]);
​
// 交集
const intersection = new Set([...setA].filter(x => setB.has(x)));
console.log(Array.from(intersection)); // [4, 5]
​
// 并集
const union = new Set([...setA,...setB]);
console.log(Array.from(union)); // [1, 2, 3, 4, 5, 6, 7, 8]
​
// 差集
const difference = new Set([...setA].filter(x =>!setB.has(x)));
console.log(Array.from(difference)); // [1, 2, 3]

Map

Map是一种键值对的数据结构，它可以将任何类型的值（包括对象）作为键和值进行存储。

特点：

• 键的多样性：Map的键可以是任意类型，而不像传统的 JavaScript 对象那样，键只能是字符串或符号。

• 有序性：Map中的键值对是按照插入的顺序进行存储的，这意味着可以按照插入的顺序来遍历Map。

常用方法：

• set(key, value)：向Map中添加一个新的键值对，如果键已存在，则更新其对应的值。

• get(key)：根据指定的键获取对应的值，如果键不存在，则返回undefined。

• has(key)：检查Map中是否存在指定的键，存在返回true，否则返回false。

• delete(key)：从Map中删除指定键的键值对，如果键存在并成功删除，则返回true，否则返回false。

• size：返回Map中键值对的数量。

基本用法：

1.创建Map实例并设置键值对。

const myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);
console.log(myMap) // Map {'name' => 'John', 'age' => 30}
console.log(myMap.get('name')); // John

2.可迭代

Map同样可以通过for...of循环迭代其键值对，每个迭代的值是一个包含键和值的数组。

let myMap = new Map([['key1', 10], ['key2', 20]]);
for (let item of myMap) {
  console.log(item);
}
// 依次输出：['key1', 10]   ['key2', 20]
​
for (let [key, value] of myMap) {
  console.log(key, value);
}
// 依次输出：key1 10   key2 20

3.对象映射

将一个对象的属性映射到另一个值。

const person = { id: 1, name: 'Alice' };
const map = new Map();
map.set(person, 'active');
console.log(map) // Map(1) {{…} => 'active'}
console.log(map.get(person)); // active

4.数据缓存

在开发单页应用（SPA）时，经常需要从服务器获取数据。为了提高性能，减少不必要的网络请求，可以使用Map来缓存已经获取的数据。

const dataCache = new Map();
async function getData(url) {
  if (dataCache.has(url)) {
    return dataCache.get(url);
  }
  const response = await fetch(url);
  const data = await response.json();
  dataCache.set(url, data);
  return data;
}