迭代器輔助程式已成為新版 Baseline 的功能

Jeremy Wagner
Jeremy Wagner

發布日期：2025 年 5 月 1 日

如果您撰寫 JavaScript，那麼您會經常執行疊代作業。您要麼是編寫迴圈來處理陣列，要麼是使用 map、filter 和其他類似方法等功能式程式設計方法來處理各種資料。

不過，使用這些方法時，一個難以解決的問題是，這些方法只適用於陣列。如果您想在可迴圈項目上使用這些方法，就必須將該項目轉換為陣列，然後呼叫所需的方法。這可能會造成浪費，或者在 interable 代表使用產生器函式的無限資料集時，這也是不可能的。不過，現在由於迭代器輔助程式已成為新版基準，這項功能終於可在各瀏覽器中使用。

迭代器輔助程式如何運作？

您可以在 Iterator 物件的 prototype 上定義新方法，藉此公開迭代器輔助程式。這些方法與您慣用的許多功能式程式設計方法相符，例如 map、filter、reduce 和其他類似方法。

舉例來說，您可以在 filter 方法上使用迭代器輔助程式，根據 DOM 節點集合的 innerText 屬性內容篩選清單項目，之後您可以在 for 迴圈中使用這些項目：

const posts = document.querySelectorAll("ul#specific-list > li")
  .values()
  .filter(item => item.textContent.includes("kiwi"));

// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
  console.log(post.textContent);
}

在上述程式碼片段中，filter 的迭代器輔助方法用於對特定 <ul> 元素中的所有 <li> 元素進行疊代。篩選條件是每個元素的文字內容都必須包含 "kiwi" 的子字串。

您也可以在產生器函式中使用疊代器輔助程式。在這個範例中，產生器函式會計算階乘，但會使用迭代器輔助程式篩除可被 8 整除的值，並將前五個篩除的值記錄到主控台：

function* factorials (n) {
  let result = 1;

  for (let i = 1; i <= n; i++) {
    result *= i;

    yield result;
  }
}

const filteredFactorials = factorials(128).filter(x => x % 8 === 0);

console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);

特別是，上述程式碼片段是使用迭代器輔助程式無法執行的範例，因為階乘數的數量是無限的，您無法將其轉換為陣列！

視情況而定，迭代器輔助程式具有許多潛力，而且可用於下列可迭代方法：

迭代器輔助程式用途的可能性非常多，而且可以大幅提升開發人員的工作效率。如今這些元素已可供新基準使用，您應該會越來越有信心，不必擔心相容性問題。如需更多資訊，請參考下列資源：