JavaScript Iterators en Iterables

In deze tutorial leer je met behulp van voorbeelden over JavaScript-iterators en iterables.

JavaScript Iterables en Iterators

JavaScript biedt een protocol om gegevensstructuren te herhalen. Dit protocol definieert hoe deze datastructuren worden herhaald met behulp van de for… oflus.

Het concept van het protocol kan worden opgesplitst in:

  • itereerbaar
  • iterator

Het iterabele protocol vermeldt dat een iterabele de Symbol.iteratorsleutel zou moeten hebben .

JavaScript Iterables

De datastructuren die de Symbol.iterator()methode hebben, worden iterables genoemd. Bijvoorbeeld Arrays, Strings, Sets, etc.

JavaScript-iteratoren

Een iterator is een object dat wordt geretourneerd door de Symbol.iterator()methode.

Het iteratorprotocol biedt de next()methode om één voor één toegang te krijgen tot elk element van de iterabele (gegevensstructuur).

Laten we eens kijken naar een voorbeeld van iterables met 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);

Uitvoer

 Array Iterator () StringIterator ()

Hier Symbol.iterator()retourneert het aanroepen van de methode van zowel de array als de string hun respectieve iteratoren.

Herhaal door Iterables

U kunt de for… oflus gebruiken om deze itereerbare objecten te doorlopen. U kunt de Symbol.iterator()methode als volgt herhalen :

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

Uitvoer

 1 2 3

Of u kunt de array eenvoudig als volgt doorlopen:

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

Hier laat de iterator de for… oflus herhalen over een array en elke waarde retourneren.

JavaScript next () -methode

Het iterator-object heeft een next()methode die het volgende item in de reeks retourneert.

De next()methode bevat twee eigenschappen: valueen done.

  • waarde
    De valueeigenschap kan van elk gegevenstype zijn en vertegenwoordigt de huidige waarde in de reeks.
  • done
    De doneeigenschap is een booleaanse waarde die aangeeft of de iteratie voltooid is of niet. Als de iteratie onvolledig is, wordt de doneeigenschap ingesteld op false, anders wordt deze ingesteld op true.

Laten we eens kijken naar een voorbeeld van array-iterables:

 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)

U kunt next()herhaaldelijk bellen om een arrIteratorobject te herhalen .

  • De next()methode retourneert een object met twee eigenschappen: valueen done.
  • Wanneer de next()methode het einde van de reeks bereikt, wordt de doneeigenschap ingesteld op false.

Laten we eens kijken hoe for… ofloop het bovenstaande programma uitvoert. Bijvoorbeeld,

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

Uitvoer

 Hallo

De for… oflus doet precies hetzelfde als het programma hierboven.

De for… oflus blijft de next()methode op de iterator aanroepen . Zodra het bereikt done:true, wordt de for… oflus beëindigd.

Door de gebruiker gedefinieerde iterator

U kunt ook uw eigen iterator maken en aanroepen next()om toegang te krijgen tot het volgende element. Bijvoorbeeld,

 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());

Uitvoer

 (waarde: "h", done: false) (waarde: "e", done: false) (waarde: "l", done: false) (waarde: "l", done: false) (waarde: "o" , done: false) (waarde: undefined, done: true)

In het bovenstaande programma hebben we onze eigen iterator gemaakt. De displayElements()functie retourneert valueen doneeigenschap.

  • Elke keer dat de next()methode wordt aangeroepen, wordt de functie één keer uitgevoerd en wordt de waarde van een array weergegeven.
  • Ten slotte, wanneer alle elementen van een array zijn uitgeput, wordt de doneeigenschap ingesteld op true, met valueas undefined.

Interessante artikelen...