在JavaScript开发中，数组作为最常用的数据结构之一，几乎无处不在。然而，Set作为一种更高效且功能强大的数据结构，却常常被开发者忽视。随着TC39 Set提案中新增方法的引入，Set的功能得到了进一步扩展，使其在处理数据集合时更加灵活和高效。本文将深入探讨Set的起源、核心功能、新增方法以及其在实际开发中的应用场景，帮助你全面掌握这一被低估的JavaScript利器。

· · ·

一、Set的起源与背景

1.1 ES6的革新：Set的诞生

Set是在2015年随着ECMAScript 6（ES6）的发布而引入的。在此之前，开发者主要依赖数组来管理数据集合，但数组在处理唯一性和查找效率方面存在明显短板：

• 重复值问题：数组允许存储重复值，导致唯一性检查需要额外的逻辑。
• 低效的存在性检查：查找数组中是否存在某个元素需要线性搜索（如Array.includes），时间复杂度为O(n)，对于大型数据集来说性能较差。

Set的引入正是为了解决这些问题。它提供了一种专门用于存储唯一值的数据结构，并优化了添加、删除和查找操作，使代码更简洁、更高效。

· · ·

二、Set的核心特性

2.1 什么是Set？

Set是一种存储唯一值的数据结构，这意味着它不会存储重复的元素。以下是一个简单的示例：

const mySet = new Set();  
mySet.add(1);  
mySet.add(2);  
mySet.add(2); // 重复值，会被忽略  
  
console.log(mySet); // 输出: Set(2) { 1, 2 }

Set可以存储任何类型的值，包括原始类型和对象：

const mixedSet = new Set([1, 'hello', { key: 'value' }, true]);  
console.log(mixedSet); // 输出: Set(4) { 1, 'hello', { key: 'value' }, true }

2.2 Set的常见应用场景

• 去重：快速去除数组中的重复值。
• 存在性检查：高效判断某个值是否存在于集合中。
• 数据集合操作：如并集、交集、差集等。

· · ·

三、Set的基本方法

3.1 add(value)

向Set中添加一个值（如果值已存在，则忽略）：

const mySet = new Set();  
mySet.add(1);  
mySet.add(2);  
console.log(mySet); // 输出: Set(2) { 1, 2 }

3.2 delete(value)

从Set中删除指定的值：

mySet.delete(1);  
console.log(mySet); // 输出: Set(1) { 2 }

3.3 has(value)

检查Set中是否存在某个值：

console.log(mySet.has(2)); // 输出: true  
console.log(mySet.has(3)); // 输出: false

3.4 size

返回Set中元素的数量：

console.log(mySet.size); // 输出: 1

3.5 clear()

清空Set中的所有元素：

mySet.clear();  
console.log(mySet.size); // 输出: 0

3.6 遍历Set

Set是可迭代的，可以通过for...of或forEach进行遍历：

const mySet = newSet([1, 2, 3]);  

for (const value of mySet) {  
console.log(value);  
}  
// 输出:  
// 1  
// 2  
// 3  

mySet.forEach(value =>console.log(value));  
// 输出:  
// 1  
// 2  
// 3

· · ·

四、Set的进阶功能：TC39提案新增方法

TC39提案为Set引入了多个新方法，使其在处理集合操作时更加高效和直观。

4.1 union

使用场景：合并两个集合，去除重复值。

const viewedRecommendations = new Set([301, 302, 303]);  
const topSelling = new Set([303, 304, 305]);  
  
const combinedRecommendations = viewedRecommendations.union(topSelling);  
console.log(combinedRecommendations); // 输出: Set(5) { 301, 302, 303, 304, 305 }

4.2 intersection

使用场景：查找两个集合的交集。

const promotionProducts = new Set([401, 402, 403]);  
const viewedProducts = new Set([402, 403, 404]);  
  
const productsToHighlight = promotionProducts.intersection(viewedProducts);  
console.log(productsToHighlight); // 输出: Set(2) { 402, 403 }

4.3 difference

使用场景：计算两个集合的差集。

const viewedProducts = new Set([501, 502, 503]);  
const cartProducts = new Set([503]);  
  
const notInCart = viewedProducts.difference(cartProducts);  
console.log(notInCart); // 输出: Set(2) { 501, 502 }

4.4 symmetricDifference

使用场景：查找两个集合的对称差集。

const warehouseA = new Set([601, 602, 603]);  
const warehouseB = new Set([603, 604, 605]);  
  
const uniqueToEachWarehouse = warehouseA.symmetricDifference(warehouseB);  
console.log(uniqueToEachWarehouse); // 输出: Set(4) { 601, 602, 604, 605 }

4.5 isSupersetOf 和 isSubsetOf

使用场景：检查一个集合是否包含另一个集合。

const inventory = new Set([801, 802, 803, 804]);  
const cart = new Set([802, 803]);  
  
console.log(inventory.isSupersetOf(cart)); // true  
console.log(cart.isSubsetOf(inventory)); // true

4.6 isDisjointFrom

使用场景：检查两个集合是否没有交集。

const restrictedPaymentMethods = new Set(['Paypal', 'Credit Card']);  
const userPaymentMethod = new Set(['Gift Card']);  
if (userPaymentMethod.isDisjointFrom(restrictedPaymentMethods)) {  
    console.log('Method not allowed');  
} // Method not allowed

· · ·

五、Set与数组的性能对比

5.1 时间复杂度

Set在添加、删除和查找操作上的时间复杂度为O(1)，而数组的这些操作通常需要O(n)。对于大型数据集，Set的性能优势尤为明显。

5.2 适用场景

• 使用Set：当需要快速查找、去重或频繁添加/删除元素时。
• 使用数组：当需要按索引访问元素或维护元素顺序时。

· · ·

六、总结

Set作为JavaScript中一种强大的数据结构，在处理唯一值集合时表现出色。随着TC39提案新增方法的引入，Set的功能得到了进一步扩展，使其在并集、交集、差集等操作中更加高效。如果你经常使用数组并希望优化代码性能，Set无疑是一个值得尝试的选择。通过掌握Set的核心功能和新增方法，你可以在开发中更高效地处理数据集合，提升代码质量和性能。

· · ·

原文地址：https://medium.com/@olivier.lelay/set-an-underrated-power-of-javascript-a53aa712d464?source=rss------javascript_tips-5