Pomoce iteracyjne stały się dostępne jako nowe wartości domyślne

Jeremy Wagner
Jeremy Wagner

Data publikacji: 1 maja 2025 r.

Jeśli piszesz JavaScript, pętle są Ci dobrze znane. Piszesz pętle do pracy z tablicami lub używasz metod programowania funkcyjnego, takich jak map, filter i inne podobne metody do przetwarzania wszelkiego rodzaju danych.

Jedynym problemem związanym z tymi metodami jest to, że są one dostępne tylko w przypadku tablic. Jeśli chcesz użyć ich w przypadku obiektu iterowalnego, musisz go przekształcić w tablicę, a potem wywołać potrzebną metodę. Może to być nieefektywne, a w przypadku, gdy interable reprezentuje nieskończony zbiór danych za pomocą funkcji generatora, nie jest to możliwe. Teraz, gdy pomocnicze elementy iteracyjne są dostępne jako nowa podstawa, ta funkcja jest dostępna we wszystkich przeglądarkach.

Jak działają pomocnicze iteratory?

Pomocnicze iteratory są udostępniane przez zdefiniowanie nowych metod w obiekcie Iterator w obiekcie prototype. Te metody są zgodne z wieloma znanymi Ci metodami programowania funkcyjnego, takimi jak map, filter, reduce i inne podobne metody.

Możesz na przykład użyć pomocnika iteracji w metodie filter, aby filtrować elementy listy według zawartości ich właściwości innerText w zbiorze węzłów DOM, którego możesz później użyć w pętli 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);
}

W poprzednim fragmencie kodu metoda pomocnicza iteracji dla filter służy do iteracji wszystkich elementów <li> w konkretnym elemencie <ul>. Kryterium filtrowania jest takie, że treść tekstowa każdego elementu musi zawierać podciąg znaków "kiwi".

Pomocnicze iteratory mogą być też używane z funkcjami generatora. W tym przykładzie funkcja generatora oblicza wykładniki, ale używa pomocnika iteracyjnego, aby odfiltrować wartości, które są podzielne przez 8, i zapisać na konsoli pierwsze 5 odfiltrowanych wartości:

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);

Poprzedni fragment kodu jest przykładem czegoś, czego nie da się zrobić za pomocą pomocników iteracji, ponieważ liczba czynników jest nieskończona i nie można jej przekształcić w tablicę.

W zależności od sytuacji pomocnicze iteratory mogą mieć wiele zastosowań. Są one dostępne w przypadku każdej z tych metod iteracyjnych:

Możliwości użycia iteratora pomocniczego są ogromne i mogą znacznie ułatwić pracę programistom. Teraz, gdy są one dostępne jako nowe wersje podstawowe, z czasem będziesz mieć coraz większe zaufanie do ich używania bez obaw o problemy ze zgodnością. Więcej informacji znajdziesz w tych materiałach: