Iteratoare și Iterabile JavaScript

Î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… ofbucla.

Conceptul protocolului poate fi împărțit în:

  • iterabil
  • iterator

Protocolul iterabil menționează că un iterabil ar trebui să aibă Symbol.iteratorcheia.

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… ofbucla 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… ofbuclei 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 .
    donedonefalsetrue

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 arrIteratorobiect.

  • next()Metoda returneaza un obiect cu două proprietăți: valueși done.
  • Când next()metoda ajunge la sfârșitul secvenței, atunci doneproprietatea este setată la false.

Să vedem cum for… ofbucla 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… ofBucla face exact la fel ca și programul de mai sus.

for… ofBucla păstrează apelând next()metoda pe iterator. Odată ce ajunge done:true, for… ofbucla 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 doneproprietate.

  • 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, doneproprietatea este setată la true, cu valuecât undefined.

Articole interesante...