在前端开发中，我们经常需要对数据进行处理和操作。有时候我们需要保证数据的唯一性，这就需要用到一种数据结构——Set。ECMAScript 2016 引入了 Set，它是一种无序的，可以存储各种类型的唯一值的集合，与数组不同，Set 中的值不能重复。在本文中，我们将深入探讨如何使用 ECMAScript 2016 的 Set 数据结构进行无重复数据的存储和操作。
Set 的基本用法
Set 的基本用法非常简单，可以使用以下方法进行创建和操作：
创建一个 Set
创建一个空的 Set 可以使用 new Set()，也可以使用数组来创建 Set，数组中的元素会被自动过滤掉重复的：
const set1 = new Set();
const set2 = new Set([1, 2, 3, 3]);
console.log(set2); // Set(3) {1, 2, 3}Set 的操作方法
Set 提供了一系列的操作方法，包括添加元素、删除元素、清空 Set 等：
// javascriptcn.com 代码示例 const set = new Set([1, 2, 3]); // 添加元素 set.add(4); // 删除元素 set.delete(3); // 判断是否存在某个元素 set.has(2); // true // 获取 Set 中元素个数 set.size; // 3 // 清空 Set set.clear();
Set 的遍历方法
Set 提供了四种遍历方法：keys()、values()、entries() 和 forEach()。
// javascriptcn.com 代码示例
const set = new Set([1, 2, 3]);
// 遍历 Set 中的元素
for (let item of set) {
console.log(item); // 1 2 3
}
// 获取 Set 中的 keys
for (let key of set.keys()) {
console.log(key); // 1 2 3
}
// 获取 Set 中的 values
for (let value of set.values()) {
console.log(value); // 1 2 3
}
// 获取 Set 中的 entries
for (let entry of set.entries()) {
console.log(entry); // [1, 1] [2, 2] [3, 3]
}
// 使用 forEach 遍历 Set
set.forEach((value, index) => {
console.log(index, value); // 1 0 2 1 3 2
});Set 在去重中的应用
Set 在去重中的应用非常广泛，它可以轻松地去除数组或字符串中的重复元素。
数组去重
使用 Set 去重数组，只需要将数组作为参数传入 Set 的构造函数中，然后通过扩展运算符将 Set 转换为数组即可：
const arr = [1, 2, 2, 3, 3, 4]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4]
字符串去重
同样的，使用 Set 去重字符串只需要将字符串转换为数组，再使用 Set 进行去重即可：
const str = 'abacdedcba';
const uniqueStr = [...new Set(str)].join('');
console.log(uniqueStr); // 'abcde'Set 在并集、交集、差集中的应用
除了在去重中的应用，Set 还可以很方便地进行集合运算，包括并集、交集、差集三种操作。
并集
并集指的是将两个集合中的元素合并起来，去除其中的重复元素。
const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);
const unionSet = new Set([...set1, ...set2]);
console.log(unionSet); // Set(5) {1, 2, 3, 4, 5}交集
交集指的是将两个集合中共同存在的元素提取出来。
const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);
const intersectSet = new Set([...set1].filter(item => set2.has(item)));
console.log(intersectSet); // Set(1) {3}差集
差集指的是在一个集合中去除与另一个集合中相同元素后剩余的元素。
const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);
const diffSet = new Set([...set1].filter(item => !set2.has(item)));
console.log(diffSet); // Set(2) {1, 2}总结
Set 数据结构在前端开发中有着广泛的应用，特别是在需要去重或进行集合运算的场景下，Set 的优势更加明显。本文中介绍了 Set 的基本使用方法和在数组、字符串、集合运算中的应用示例，相信读完本文后，大家对 Set 有了更深入的认识，并可以将它应用到实际的开发中去。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6535c92c7d4982a6ebd5d3a4