為什麼 Set.has() 查找項目比 Array.includes() 更快

有時，在建立應用程式時，效能最終成為關鍵或至少是重要的驅動因素，特別是在處理大型資料集或即時要求時。 JavaScript 中最常見的任務之一是檢查集合中是否存在某個值。最常用的兩個替代方法是 Array.includes() 和 Set.has()。兩者都有效，但實際上，Set.has() 比 Array.includes 效果更好。讓我們深入探討原因，並決定何時應該使用任何替代方案。

理解 Array.includes() 與 Set.has()

有兩個方法看起來用法相當簡單，但實作不同，即 Array.includes() 和 Set.has()。

Array.includes()

includes() 方法檢查陣列中是否存在給定值。
它利用了 O(n) 的時間複雜度，使得陣列長度越大，檢查數值所需的時間就越長。
這是因為 Array.includes() 從頭到尾搜尋陣列（或直到找到值），陣列越大，花費的時間越長。

Set.has()

Set 的 has() 方法也會檢查給定值是否存在，但速度快得多。
Set.has() 依賴基於雜湊表的結構，該結構允許恆定時間查找，或 O(1) 時間複雜度。
與陣列不同，集合是為處理唯一值而建構的，因此它內部不會有重複的值，並且具有更多的查找時間。

為什麼 Set.has() 對於大型資料集更快

當您使用 Set.has() 時，JavaScript 可以透過一次直接操作找到該項目，無論集合中有多少項目。例如，在檢查某個值是否在包含一百萬的集合中時，Set.has() 消耗的時間將與檢查十完全相同。

另一方面，Array.includes() 從左到右順序檢查每個元素，直到找到感興趣的項目或到達其末尾。這意味著它的尺寸越長，檢查時間就越長，特別是在項目接近尾部的情況下，而且肯定是當有問題的項目不存在時。

以下是一個詳細的例子：

const bigArray = Array.from({ length: 1000000 }, (_, i) => i);
const bigSet = new Set(bigArray);

const valueToFind = 999999;

// Array.includes (O(n)) - Slower for large arrays
console.time("Array.includes");
bigArray.includes(valueToFind);
console.timeEnd("Array.includes");

// Set.has (O(1)) - Faster for large sets
console.time("Set.has");
bigSet.has(valueToFind);
console.timeEnd("Set.has");

當您執行此指令時，您會發現 Set.has() 在大型陣列上的效能遠遠優於 Array.includes()。實際上，這種差異很可能會轉化為更流暢的動畫、更快的載入時間，甚至更少的伺服器資源使用。

何時使用 Set.has() 和 Array.includes()

這一切都取決於您想要實現的目標。簡單總結如下：

使用 Set.has() 如果：

• 您正在處理大數據並進行大量查找。
• 您正在使用唯一值，例如一組唯一的使用者 ID、標籤或關鍵字。
• 您不介意將陣列轉換為
的少量前期成本
• 設定為盡量減少以後的查找次數。

使用 Array.includes() 如果：

• 您的資料集很小，效能差異可以忽略不計。
• 您只需檢查某個項目一次或幾次，因此建立 Set 沒有任何好處。
• 您正在處理重複項，這是集合無法處理的。

範例用例

假設您正在實作一個使用者搜尋功能，根據封鎖的單字清單過濾名稱。如果您有數百個被封鎖的單字並且經常搜索，則對被封鎖的單字使用集合可以使每次搜尋檢查更快：

const bigArray = Array.from({ length: 1000000 }, (_, i) => i);
const bigSet = new Set(bigArray);

const valueToFind = 999999;

// Array.includes (O(n)) - Slower for large arrays
console.time("Array.includes");
bigArray.includes(valueToFind);
console.timeEnd("Array.includes");

// Set.has (O(1)) - Faster for large sets
console.time("Set.has");
bigSet.has(valueToFind);
console.timeEnd("Set.has");

即使在較小的情況下，Set 也有助於保持事情的高效性和可預測性。另外，如果封鎖的單字清單成長，您就已經擁有了一個可擴展的解決方案。

重點

• 效能：Set.has() 提供O(1) 時間複雜度，對於較大的集合來說，它比Array.includes() (O(n)) 快得多

• 適用性：集合是為唯一值而設計的，因此它自然地針對查找進行了最佳化。陣列對於重複值更靈活，但在檢查是否存在時速度較慢。

• 可擴充性：隨著資料的成長，Set.has() 繼續表現良好，而 Array.includes() 會變慢。

最後的想法

在 Set.has() 和 Array.includes() 之間進行選擇時，了解資料集的大小和性質始終很重要。 Array.includes() 非常適合小型資料集，但 Set.has() 在速度至關重要的情況下是一個寶貴的工具。正確的資料結構可以幫助優化您的 JavaScript 應用程序，使其更快、更有效率，而無需對程式碼進行重大更改。

因此，每當你發現自己在檢查某個東西是否存在時，你應該問自己：這是數組的工作，還是我可以使用集合的力量？正確處理很可能就是您的應用程式所需要的不同。

以上是為什麼 Set.has() 查找項目比 Array.includes() 更快的詳細內容。更多資訊請關注PHP中文網其他相關文章！