超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

在JavaScript開發(fā)中，數組作為最常用的數據結構之一，幾乎無處不在。然而，Set作為一種更高效且功能強大的數據結構，卻常常被開發(fā)者忽視。隨著TC39 Set提案中新增方法的引入，Set的功能得到了進一步擴展，使其在處理數據集合時更加靈活和高效。本文將深入探討Set的起源、核心功能、新增方法以及其在實際開發(fā)中的應用場景，幫助你全面掌握這一被低估的JavaScript利器。

· · ·

一、Set的起源與背景

1.1 ES6的革新：Set的誕生

Set是在2015年隨著ECMAScript 6（ES6）的發(fā)布而引入的。在此之前，開發(fā)者主要依賴數組來管理數據集合，但數組在處理唯一性和查找效率方面存在明顯短板：

• 重復值問題：數組允許存儲重復值，導致唯一性檢查需要額外的邏輯。
• 低效的存在性檢查：查找數組中是否存在某個元素需要線性搜索（如Array.includes），時間復雜度為O(n)，對于大型數據集來說性能較差。

Set的引入正是為了解決這些問題。它提供了一種專門用于存儲唯一值的數據結構，并優(yōu)化了添加、刪除和查找操作，使代碼更簡潔、更高效。

· · ·

二、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的性能優(yōu)勢尤為明顯。

5.2 適用場景

• 使用Set：當需要快速查找、去重或頻繁添加/刪除元素時。
• 使用數組：當需要按索引訪問元素或維護元素順序時。

· · ·

六、總結

Set作為JavaScript中一種強大的數據結構，在處理唯一值集合時表現出色。隨著TC39提案新增方法的引入，Set的功能得到了進一步擴展，使其在并集、交集、差集等操作中更加高效。如果你經常使用數組并希望優(yōu)化代碼性能，Set無疑是一個值得嘗試的選擇。通過掌握Set的核心功能和新增方法，你可以在開發(fā)中更高效地處理數據集合，提升代碼質量和性能。

· · ·

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