首頁 > web前端 > js教程 > 為什麼 Set.has() 查找項目比 Array.includes() 更快

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

Susan Sarandon
發布: 2024-11-06 06:09:03
原創
437 人瀏覽過

Why Set.has() is Faster Than Array.includes() for Finding Items

有時,在建立應用程式時,效能最終成為關鍵或至少是重要的驅動因素,特別是在處理大型資料集或即時要求時。 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板