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… of
pętli.
Pojęcie protokołu można podzielić na:
- iterowalne
- iterator
Iterowalny protokół wspomina, że iterowalny powinien mieć Symbol.iterator
klucz.
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… of
pę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… of
pę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: value
a 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 .
done
done
false
true
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 arrIterator
obiekcie.
next()
Sposób powraca obiekt z dwóch właściwości:value
idone
.- Gdy
next()
metoda osiągnie koniec sekwencji,done
właściwość jest ustawiana nafalse
.
Spójrzmy, jak for… of
pę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… of
Pętla działa dokładnie tak samo jak program powyżej.
for… of
Pętla utrzymuje wywołanie next()
metody na iteracyjnej. Po osiągnięciu done:true
The for… of
pę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 value
i done
mienia.
- 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,
done
właściwość jest ustawiana natrue
, zvalue
asundefined
.