Iteratory asynchroniczne vs generatory asynchroniczne w JavaScript
W JavaScript, Iteratory asynchroniczne I Generatory asynchroniczne Oferuj tę samą funkcjonalność, którą można skutecznie wdrożyć za pomocą prymitywów języka JavaScript. Dlaczego więc nie wybrać prostego rozwiązania, a nie wprowadzić się w kolejne zamieszanie?
W tym poście omawia iteratory asynchroniczne vs generatory asynchroniczne w JavaScript wraz z odpowiednimi przykładami. A więc zacznijmy!
Iteratory w JavaScript
W JavaScript „Iteratorzy”Służą do dostępu do synchronicznych struktur danych, takich jak tablice, mapy i zestawy. Opierają się przede wszystkim na „Następny()„Metoda, która obejmuje dwie właściwości:„Następny" I "wartość”:
- „„wartość”Własność Następny() Metoda wskazuje bieżącą wartość w sekwencji iteracji.
- „„zrobione”Własność Następny() Metoda reprezentuje status iteracji, gdzie „FAŁSZ”Wskazuje, że proces iteracji jest zakończony i„PRAWDA”Oznacza, że iteracja jest niekompletna.
Teraz sprawdzimy działanie iteratorów w JavaScript za pomocą przykładu.
Przykład: Używanie iteratorów w JavaScript
Stworzymy „liczby„Obiekt o dwóch właściwościach:„początek" I "koniec". Następnie dodamy „Zdolność iteracji" do "liczby„Obiekt, wykorzystując„Symbol.iterator ()" metoda.
„„Symbol.iterator ()„Metoda zostanie powołana raz, na początku„Dla…„Pętla i zwraca iteracyjny obiekt. Po wykonaniu tej operacji „„Dla…„Pętla będzie dostępna do obiektu iterowalnego i pobrą wartości w sekwencji iteracji:
Niech liczby =Start: 1,
Koniec: 4,
[Symbol.iterator] ()
powrót
Aktualny: to.początek,
Last: To.koniec,
Następny()
Jeśli to.aktualny <= this.last)
return gotowe: false, wartość: to.Current ++;
w przeciwnym razie
return Done: true;
;
;
Powyższe, „Następny()„Metoda zostanie wywołana i zwróci„wartość„Jako obiekt:
dla (niech wartość liczb)alert (wartość);
Napisz podany kod w oknie konsoli i wykonaj go:
Udało nam się iterować każdy element „liczby„Obiekt, który można zobaczyć w następującym GIF:
Jak wspomniano wcześniej, zwykłe iteratory JavaScript mogą pomóc w iterowaniu danych synchronicznych. Co jeśli wartości przyjdą asynchronicznie z powodu jakiegokolwiek opóźnienia? W takim scenariuszu musisz zaimplementować Iteratory asynchroniczne W JavaScript.
Iteratory asynchroniczne w JavaScript
Iteratory asynchroniczne są osadzone w ES9 do obsługi asynchronicznych źródeł danych. Działa podobnie do zwykłego iteratora, z wyjątkiem tego, że „Następny()„Metoda w asynchronicznym iteratorze zwraca„Obietnica”To rozwiązuje„wartość" I "zrobione”Wartości właściwości obiektu.
Konwertuj regularny iterator na asynchroniczny iterator w JavaScript
Jeśli chcesz przekonwertować zwykłego iteratora na asynchroniczny iterator, postępuj zgodnie z instrukcjami poniżej
- Zamiast używać „Symbol.Iterator ()„Metoda, wykorzystaj”Symbol.asynciterator ()".
- Wymusz „Następny()”Metoda zwrotu Obietnica i dodaj „Async„Słowo kluczowe z nim jako:„Async Next ()".
- Wreszcie „„czekając…„Pętla może być używana do iteracji nad obiektem, zamiast„Dla…" pętla.
Przykład: Iteratory asynchroniczne w JavaScript
Teraz przekonwertujemy regularny iterator zdefiniowany w poprzednim przykładzie na asynchroniczne iteratory, postępując zgodnie z określonymi regułami.
W tym celu zastąpimy „Symbol.Iterator ()”Z„Symbol.asynciterator ()" metoda. Następnie dodamy słowo kluczowe „Async" przed "Następny()" metoda. Za pomocą "czekać na" w "Następny()„Metoda wyznaje czas na spełnienie obietnicy po„2" sekundy:
Niech liczby =Start: 1,
Koniec: 4,
[Symbol.Asynciterator] ()
powrót
Aktualny: to.początek,
Last: To.koniec,
Async Next ()
AkaitaNewPromise (RESPORVE => SETTIMEOUT (RESPORVE, 2000));
Jeśli to.aktualny <= this.last)
return gotowe: false, wartość: to.Current ++;
w przeciwnym razie
return Done: true;
;
;
Do iteracji nad asynchronicznym obiektem, „czekając…„Pętla zostanie wykorzystana w następujący sposób:
(async () =>Do oczekiwania (niech wartość liczb)
alert (wartość);
) ()
Wyjście wyświetli iteracyjne wartości w polu alertu po opóźnieniu dwóch sekund:
W tym momencie zrozumiałeś działanie asynchronicznych iteratorów. Teraz pójdziemy naprzód i dowiemy się o Generatory asynchroniczne W JavaScript.
Generatory w JavaScript
Iteratory w JavaScript są dość przydatne; Potrzebują jednak starannego programowania, aby wykonać swoją oczekiwaną funkcjonalność. Funkcja generatora JavaScript to kolejne potężne narzędzie, które pozwala zdefiniować algorytm iteracyjny za pomocą jednego „Nieprzezroczysty”Funkcja.
Początkowo funkcja generatora nie wykonuje kodu, gdy jest wywoływany; Zamiast tego zwraca określony typ iteratora znanego jako „Generator". Funkcję generatora można wywoływać tyle razy, ile potrzeba, a na każdym połączeniu zwraca nowy „Generator,”, Które można raz iterować.
Aby napisać funkcję generatora, „funkcjonować*„Zastosowana jest składnia. Ta funkcja obejmuje również „dawać„Operator, który zatrzymuje wykonywanie funkcji generatora, aż zażądanie kolejnej wartości obiektu.
Przykład: Korzystanie z generatorów w JavaScript
Zdefiniujemy „generator„Funkcja, która zwraca wartości z„punkt początkowy" Do "punkt końcowy" używając "dawać„Operator. „„*”Dodano z„funkcjonować”Słowo kluczowe wskazuje, że„generator()”Jest funkcją generatora, a nie normalną funkcją regularną.
funkcja* generator (punkt początkowy, endingPoint)dla (niech i = punkt początkowy; i<= endingPoint; i++)
Wydaj I;
W następnym kroku wywołamy „generator()”Funkcja, która zwraca generator przechowywany w„X" obiekt:
Niech x = generator (1, 5);Wreszcie, aby iterować „X„Generator, użyjemy„Dla…" pętla:
dla (const liter x)konsola.log (num);
Wykonanie dostarczonego programu pokaże iterowane wartości:
Jeśli chcesz odzyskać wyniki oparte na obietnicy z „Generator„Musisz użyć”Generator asynchroniczny”W programie JavaScript.
Generatory asynchroniczne w JavaScript
Generator asynchroniczny w JavaScript działa podobnie do funkcji generatora, z wyjątkiem tego, że „Następny()„Metoda w generatorze asynchronicznym zwraca„Obietnica”To rozwiązuje„wartość" I "zrobione”Wartości właściwości obiektu.
Konwertuj funkcję generatora na asynchroniczny iterator w JavaScript
Postępuj zgodnie z poniższymi instrukcjami, aby przekonwertować funkcję generatora na asynchroniczny iterator w JavaScript:
- Używać "Async" przed "funkcjonować*”Słowo kluczowe.
- Zamiast "wartość”,„dawać”Powinien zwrócić„Obietnica".
Teraz pokażemy praktyczną procedurę przekształcania funkcji generatora na generatory asynchroniczne w JavaScript.
Przykład: generatory asynchroniczne w JavaScript
Po pierwsze, dodamy „Async”Słowo kluczowe przed zdefiniowaniem„SEDSYNCESPENCE ()”Funkcja asynchroniczna. AsyncEspence () daje „Obietnica”, Które zostaną spełnione za jedną sekundę:
asyncFunction* konsekwencja async. (punkt początkowy, endingPoint)dla (niech i = początkowe punkt; i
settimeout (() =>
Resolve (i);
, 1000);
);
Wreszcie „czekając…„Pętla służy do iteracji i zwracania generatora asynchronicznego:
(async () =>Niech x = sekwencja asynchroniczna (1, 5);
Za oczekiwanie (niech liczba x)
konsola.log (num);
) ();
Ten program JavaScript zwróci wartości z „1" Do "5”Podczas przerwy„jeden" drugi:
Dostarliśmy podstawowe informacje związane z Iteratory asynchroniczne I Generatory asynchroniczne. Oba mogą być jednak używane do iteracji danych asynchronicznych w JavaScript; Utrzymanie wewnętrznej logiki lub definicji asynchronicznych iteratorów może być trudne, podczas gdy generatory asynchroniczne oferują więcej wydajny I mniej podatny na błędy sposób korzystania z iteratorów. Ukrywa również Złożoność iteratora i sprawia, że kod jest zwięzły i czytelny.
Polecamy więc Użyj generatorów asynchronicznych do obsługi iteracji związanych z asynchronicznym gromadzeniem danych.
Wniosek
Asynchroniczny iterators i Generatory asynchroniczne są wykorzystywane do iteracji danych, dostarczone po określonym czasie. Asynchroniczne iteratory wykonują „Symbol.asynciterator ()„Metoda zwrotu„Iterator”, Podczas gdy generatory asynchroniczne zwracają specjalny rodzaj iteratora„Generator”Sam w sobie, którego można użyć tam, gdzie jest wymagana iteracja. W tym spisie omówiono asynchroniczne iteratory i generatory asynchroniczne w JavaScript.