Iteratory i Iteratory JavaScript

W tym samouczku dowiesz się o iteratorach i elementach iteracyjnych JavaScript za pomocą przykładów.

Iteratory i iteratory JavaScript

JavaScript zapewnia protokół do iteracji po strukturach danych. Ten protokół definiuje sposób iteracji tych struktur danych przy użyciu for… ofpętli.

Pojęcie protokołu można podzielić na:

  • iterowalne
  • iterator

Iterowalny protokół wspomina, że ​​iterowalny powinien mieć Symbol.iteratorklucz.

Iterable JavaScript

Struktury danych, które mają tę Symbol.iterator()metodę, nazywane są iterowalnymi. Na przykład tablice, ciągi, zestawy itp.

Iteratory JavaScript

Iterator to obiekt zwracany przez Symbol.iterator()metodę.

Protokół iteratora zapewnia next()metodę dostępu do każdego elementu iterowalnego (struktury danych) pojedynczo.

Spójrzmy na przykład posiadania iterowalnych Symbol.Iterator()

 const arr = (1, 2 ,3); // calling the Symbol.iterator() method const arrIterator = arr(Symbol.iterator)(); // gives Array Iterator console.log(arrIterator); const str = 'hello'; // calling the Symbol.iterator() method const strIterator = str(Symbol.iterator)(); // gives String Iterator console.log(strIterator);

Wynik

 Array Iterator () StringIterator ()

W tym przypadku wywołanie Symbol.iterator()metody zarówno tablicy, jak i ciągu zwraca ich odpowiednie iteratory.

Iteruj przez Iterables

Możesz użyć for… ofpętli do iteracji po tych iterowalnych obiektach. Możesz iterować za pomocą następującej Symbol.iterator()metody:

 const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )

Wynik

 1 2 3

Lub możesz po prostu iterować po tablicy w następujący sposób:

 const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )

Tutaj iterator pozwala for… ofpętli na iterację po tablicy i zwrócenie każdej wartości.

JavaScript next () Metoda

Obiekt iteratora ma next()metodę, która zwraca następny element w sekwencji.

next()Sposób zawiera dwie właściwości: valuea done.

  • Wartość właściwość może być dowolny typ danych i reprezentuje wartość prądu w sekwencji.
    value
  • zrobione nieruchomość jest logiczna wartość, która wskazuje, czy iteracja jest kompletny, czy nie. Jeśli iteracja jest niekompletna, właściwość jest ustawiona na , w przeciwnym razie jest ustawiona na .
    donedonefalsetrue

Spójrzmy na przykład iterowalnych tablic:

 const arr = ('h', 'e', 'l', 'l', 'o'); let arrIterator = arr(Symbol.iterator)(); console.log(arrIterator.next()); // (value: "h", done: false) console.log(arrIterator.next()); // (value: "e", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "o", done: false) console.log(arrIterator.next()); // (value: undefined, done: true)

Możesz wywoływać next()wielokrotnie, aby iterować po arrIteratorobiekcie.

  • next()Sposób powraca obiekt z dwóch właściwości: valuei done.
  • Gdy next()metoda osiągnie koniec sekwencji, donewłaściwość jest ustawiana na false.

Spójrzmy, jak for… ofpętla wykonuje powyższy program. Na przykład,

 const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )

Wynik

 cześć

for… ofPętla działa dokładnie tak samo jak program powyżej.

for… ofPętla utrzymuje wywołanie next()metody na iteracyjnej. Po osiągnięciu done:trueThe for… ofpętla kończy.

Iterator zdefiniowany przez użytkownika

Możesz także stworzyć swój własny iterator i wywołać next()dostęp do następnego elementu. Na przykład,

 function displayElements(arr) ( // to update the iteration let n = 0; return ( // implementing the next() function next() ( if(n < arr.length) ( return ( value: arr(n++), done: false ) ) return ( value: undefined, done: true ) ) ) ) const arr = ('h', 'e', 'l', 'l', 'o'); const arrIterator = displayElements(arr); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next());

Wynik

 (wartość: "h", gotowe: fałsz) (wartość: "e", gotowe: fałsz) (wartość: "l", gotowe: fałsz) (wartość: "l", gotowe: fałsz) (wartość: "o" , done: false) (wartość: undefined, done: true)

W powyższym programie stworzyliśmy własny iterator. Te displayElements()powroty funkcyjne valuei donemienia.

  • Za każdym razem, gdy next()wywoływana jest metoda, funkcja jest wykonywana raz i wyświetla wartość tablicy.
  • Wreszcie, gdy wszystkie elementy tablicy zostaną wyczerpane, donewłaściwość jest ustawiana na true, z valueas undefined.

Interesujące artykuły...