Wprowadzenie do iteratorów i generatorów w JavaScript

Od 2015 roku EcmaScript6 (ES6) przyniósł wiele postępów w praktykach kodowania JavaScript. Do JavaScriptu wprowadzono wiele nowoczesnych koncepcji, co znacznie poprawia jakość kodowania. W tym artykule dowiesz się o iteratorach i generatorach w JavaScript.

Iteratory i generatory to dwie różne koncepcje, ale używa się ich w podobny sposób. Służą do iteracji przez tablice i obiekty w JavaScript.

Iteratory

Iteratory są jak zaawansowane pętle, które można wstrzymywać. Iteratory składają się z Następny() funkcja, która zwraca wartość i status wykonania. ten wartość pole to wartość w tablicy pod danym indeksem. Gotowe jest wartością logiczną, która zwraca stan ukończenia iteracji przez pętlę.

Oto przykład, który pokazuje, jak iteratory:

funkcja fruitIter (owoce){
niech indeks = 0;
powrót {
następny: funkcja(){
wskaźnik zwrotu < owoce.długość? { wartość: owoce[indeks++], zrobione: fałsz }: {zrobione: prawda}
}
}
}
const fruitsArray = ["Mango", "Banan", "Winogrona"];
const fruits = fruitIter (fruitsArray);
console.log (owoce.next().value);

Wyjście:

Mango

Kiedy zdasz owoceArray tablica w owocIter() metody, zwraca iterator, który jest przechowywany w owoce zmienny. ten indeks zmienna w owocIter() metoda zostaje zainicjowana na 0. Ta metoda zwraca Następny() funkcja, która pomaga w pętla przez tablicę. ten Następny() funkcja sprawdza, czy indeks jest mniejszy niż owoceArray długość. Jeśli tak, zwraca dwie zmienne: nazwę owocu o tym indeksie oraz Gotowe status. Zwracając te wartości, zwiększa również wartość indeksu.

Aby sprawdzić, jak działa ta metoda i wydrukować nazwę owocu, należy wywołać Następny() funkcja na owoce iterator i uzyskać dostęp do jego wartości.

Związane z: Czym jest funkcja w programowaniu?

Generatory

Generatory są podobne do Iteratorów, ale zwracają wiele wartości. Wartości te nazywane są wartościami wydajności. Funkcje generatora są pisane za pomocą funkcja* składnia. * oznacza, że ​​nie jest to normalna funkcja, ale generator. Oto przykład generatorów:

function* printFruits(){
plon "Mango";
plon "banan";
plon "Winogrona";
}
const fruit = printFruits();
console.log (owoc.next()); 

Wyjście:

{wartość: 'Mango', gotowe: fałsz}

W tym przykładzie dawać jest iteratorem. Kiedy wywołujesz funkcję drukujOwoce()i drukuj owoc.następny(), daje obiekt, w którym otrzymujesz wartość. ten Gotowe status wskazuje, czy wszystkie wartości zostały poddane iteracji.

Naucz się struktur danych za pomocą klas ES6 w JavaScript

JavaScript ES6 przyniósł wiele postępów w praktykach kodowania. Nie najmniej ważnym z nich jest budowanie struktur danych przy użyciu klas ES6. Naciskać. pop i stosuj swoją drogę na szczyt i zostań profesjonalistą w JavaScript!

Jak budować struktury danych za pomocą klas JavaScript ES6

Wraz z wprowadzeniem JavaScript ES6 pojawiły się niestandardowe struktury danych. Oto jak je tworzyć i stosować.

Czytaj dalej

O autorze