ES6/ES7/ES8/ES9 中的 Set 数据结构使用方法详解-JavaScript中文网-JavaScript教程资源分享门户

介绍

Set 是 ES6 中新加入的一种数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 的本质是一个值的集合，而不是一个键值对的集合，因此它在某些情况下比 Map 更适合。

基本用法

创建 Set

创建一个空的 Set：

const set = new Set();

创建一个包含元素的 Set：

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

添加元素

使用 add 方法向 Set 中添加元素：

set.add(4);

删除元素

使用 delete 方法删除 Set 中的元素：

set.delete(4);

判断元素是否存在

使用 has 方法判断 Set 中是否存在某个元素：

set.has(4); // false

获取 Set 的长度

使用 size 属性获取 Set 的长度：

set.size;

遍历 Set

使用 forEach 方法遍历 Set 中的元素：

set.forEach(val => console.log(val));

清空 Set

使用 clear 方法清空 Set 中的所有元素：

set.clear();

Set 的高级用法

Set 的去重功能

由于 Set 中的元素是唯一的，因此可以使用 Set 去重：

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

Set 与数组的互相转换

将 Set 转换为数组：

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

将数组转换为 Set：

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

Set 的交集、并集、差集操作

Set 提供了一些方法可以方便地对集合进行操作：

交集：使用 Set 的交集方法 intersect。

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
const intersect = new Set([...set1].filter(x => set2.has(x)));
console.log([...intersect]); // [2, 3]

并集：使用 Set 的并集方法 union。

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
const union = new Set([...set1, ...set2]);
console.log([...union]); // [1, 2, 3, 4]

差集：使用 Set 的差集方法 difference。

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
const difference = new Set([...set1].filter(x => !set2.has(x)));
console.log([...difference]); // [1]

ES7 中的改进

Set 的 includes 方法

ES7 中，Set 新增了一个 includes 方法，用于判断 Set 中是否包含某个元素：

const set = new Set([1, 2, 3]);
set.includes(2); // true

ES8 中的改进

Set 的遍历顺序

在 ES8 中，Set 的遍历顺序被规定为插入顺序，也就是说，遍历的顺序与元素插入的顺序一致。

Set 的新方法

ES8 中，Set 新增了一些方法：

Set.prototype.entries()：返回一个包含 Set 中所有元素的迭代器，每个元素都是一个 [value, value] 数组。
Set.prototype.keys()：返回一个包含 Set 中所有元素的迭代器，每个元素都是 Set 中元素的值。
Set.prototype.values()：返回一个包含 Set 中所有元素的迭代器，每个元素都是 Set 中元素的值。
Set.prototypeSymbol.iterator：返回一个包含 Set 中所有元素的迭代器，每个元素都是 Set 中元素的值。

ES9 中的改进

Set 的扩展运算符

在 ES9 中，Set 支持扩展运算符（...）：

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
const union = new Set([...set1, ...set2]);
console.log([...union]); // [1, 2, 3, 4]

总结

Set 是 ES6 中新增的一种数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 有很多的高级用法，包括去重、交集、并集、差集等操作。ES7、ES8、ES9 中，Set 也进行了一些改进，使得 Set 的使用更加方便。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bf7507add4f0e0ff9036e3