ES6 集合-ES6入门指南

当前位置:　首页>> 技术小册>> ES6入门指南

本章节将介绍 ES6 集合的特性和使用方法，并结合代码示例进行详细讲解。

1、集合是什么？

在计算机科学中，集合是一种用于存储不同元素的数据结构，元素之间没有任何特定的顺序或关系。在 JavaScript 中，集合是一种新的数据类型，用于存储一组唯一的值，即每个值只能出现一次。

ES6 集合提供了一种更简单、更优雅的方式来处理唯一的值，并且支持常见的集合操作，如添加、删除、查找等。

2、创建集合

ES6 集合的创建非常简单，只需要使用 Set 构造函数即可，如下所示：

const set = new Set();

以上代码创建了一个空的集合，你可以向其中添加元素。也可以使用一个数组作为参数，从而初始化集合中的元素，如下所示：

const set = new Set([1, 2, 3]);

以上代码创建了一个集合，其中包含元素 1、2 和 3。

3、添加元素

使用集合的 add() 方法可以向集合中添加元素，如下所示：

const set = new Set();
set.add(1);
set.add(2);
set.add(3);

以上代码向集合中依次添加了元素 1、2 和 3。

需要注意的是，集合中的元素必须是唯一的，如果添加了重复的元素，则只会保留一个，如下所示：

const set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(2); // 添加重复的元素

以上代码中，虽然添加了两次元素 2，但最终集合中只会包含一个元素 2。

4、删除元素

使用集合的 delete() 方法可以从集合中删除元素，如下所示：

const set = new Set([1, 2, 3]);
set.delete(2);

以上代码从集合中删除了元素 2。

如果要删除所有元素，可以使用集合的 clear() 方法，如下所示：

const set = new Set([1, 2, 3]);
set.clear();

以上代码删除了集合中的所有元素。

5、遍历集合

ES6 集合支持 for…of 循环遍历集合中的所有元素，如下所示：

const set = new Set([1, 2, 3]);
for (const element of set) {
  console.log(element);
}

以上代码输出集合中的所有元素。

ES6 集合还支持使用 forEach() 方法遍历集合中的所有元素，如下所示：

const set = new Set([1, 2, 3]);
set.forEach(element => console.log(element));

以上代码与 for…of 循环遍历集合的效果相同。

6、判断元素是否存在

使用集合的 has() 方法可以判断指定元素是否存在于集合中，如下所示：

const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
console.log(set.has(4)); // false

以上代码判断集合中是否包含元素 2 和 4，并输出结果。

7、获取集合大小

使用集合的 size 属性可以获取集合中包含元素的数量，如下所示：

const set = new Set([1, 2, 3]);
console.log(set.size); // 3

以上代码输出集合中包含元素的数量。

8、集合的应用场景

ES6 集合在实际应用中非常有用，以下是几个使用集合的示例：

9、去重

集合最常见的应用场景之一就是去重。使用集合可以轻松地去除数组中的重复元素，如下所示：

const array = [1, 2, 2, 3, 3, 3];
const set = new Set(array);
const uniqueArray = [...set];
console.log(uniqueArray); // [1, 2, 3]

以上代码使用集合去除了数组 array 中的重复元素，并将去重后的元素存储在新的数组 uniqueArray 中。

10、交集、并集、差集

集合还可以用于处理集合间的交集、并集、差集等集合操作，如下所示：

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
const intersection = new Set([...set1].filter(x => set2.has(x))); // 交集
const union = new Set([...set1, ...set2]); // 并集
const difference = new Set([...set1].filter(x => !set2.has(x))); // 差集
console.log(intersection); // Set { 2, 3 }
console.log(union); // Set { 1, 2, 3, 4 }
console.log(difference); // Set { 1 }

以上代码计算了两个集合的交集、并集、差集，并输出结果。

11、缓存数据

集合还可以用于缓存数据，以避免多次访问同一数据源。在访问数据源时，可以首先检查数据是否已缓存，如果已缓存，则直接从集合中获取数据，否则从数据源中获取数据并将其缓存到集合中，如下所示：

const cache = new Set();
function getData(id) {
  if (cache.has(id)) {
    return cache.get(id);
  }
  const data = fetchDataFromSource(id);
  cache.add(data);
  return data;
}