În acest tutorial, veți afla despre iteratorii și iterabilele JavaScript cu ajutorul exemplelor.
JavaScript Iterabile și Iteratoare
JavaScript oferă un protocol pentru a itera peste structurile de date. Acest protocol definește modul în care aceste structuri de date sunt repetate folosind for… of
bucla.
Conceptul protocolului poate fi împărțit în:
- iterabil
- iterator
Protocolul iterabil menționează că un iterabil ar trebui să aibă Symbol.iterator
cheia.
Iterabile JavaScript
Structurile de date care au Symbol.iterator()
metoda se numesc iterabile. De exemplu, matrice, șiruri, seturi etc.
Iteratori JavaScript
Un iterator este un obiect care este returnat prin Symbol.iterator()
metodă.
Protocolul iterator oferă next()
metoda de accesare a fiecărui element al iterabilului (structura datelor) unul câte unul.
Să vedem un exemplu de a avea iterabile 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);
Ieșire
Array Iterator () StringIterator ()
Aici, apelarea Symbol.iterator()
metodei atât a matricei, cât și a șirului returnează iteratorii lor respectivi.
Iterează prin Iterabile
Puteți utiliza for… of
bucla pentru a itera prin aceste obiecte iterabile. Puteți itera prin această Symbol.iterator()
metodă:
const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )
Ieșire
1 2 3
Sau puteți pur și simplu itera prin matrice astfel:
const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )
Aici, iteratorul permite for… of
buclei să itereze peste o matrice și să returneze fiecare valoare.
JavaScript next () Metodă
Obiectul iterator are o next()
metodă care returnează următorul element din secvență.
next()
Metoda conține două proprietăți: value
și done
.
- Valoarea Proprietatea poate fi de orice tip de date și reprezintă valoarea curentă în secvența.
value
- făcut Proprietatea este o valoare booleană care indică dacă iterație este complet sau nu. Dacă iterația este incompletă, proprietatea este setată la , altfel este setată la .
done
done
false
true
Să vedem un exemplu de iterabile matrice:
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)
Puteți apela în next()
mod repetat pentru a repeta un arrIterator
obiect.
next()
Metoda returneaza un obiect cu două proprietăți:value
șidone
.- Când
next()
metoda ajunge la sfârșitul secvenței, atuncidone
proprietatea este setată lafalse
.
Să vedem cum for… of
bucla execută programul de mai sus. De exemplu,
const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )
Ieșire
Buna ziua
for… of
Bucla face exact la fel ca și programul de mai sus.
for… of
Bucla păstrează apelând next()
metoda pe iterator. Odată ce ajunge done:true
, for… of
bucla se termină.
Iterator definit de utilizator
De asemenea, puteți să creați propriul iterator și next()
să apelați pentru a accesa următorul element. De exemplu,
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());
Ieșire
(valoare: "h", done: false) (valoare: "e", done: false) (valoare: "l", done: false) (valoare: "l", done: false) (valoare: "o" , făcut: fals) (valoare: nedefinit, făcut: adevărat)
În programul de mai sus, am creat propriul nostru iterator. În displayElements()
funcție returnează value
și de done
proprietate.
- De fiecare dată când
next()
se apelează metoda, funcția se execută o dată și afișează valoarea unui tablou. - În cele din urmă, atunci când toate elementele unui tablou sunt epuizate,
done
proprietatea este setată latrue
, cuvalue
câtundefined
.