En introduktion till Iteratorer och generatorer i JavaScript

Sedan 2015 har EcmaScript6 (ES6) medfört många framsteg inom JavaScript -kodning. Många moderna koncept introducerades för JavaScript, vilket förbättrade kodningsupplevelsen kraftigt. I den här artikeln lär du dig om iteratorer och generatorer i JavaScript.

Iteratorer och generatorer är två olika begrepp, men de används på liknande sätt. De är vana att iterera genom matriser och objekt i JavaScript.

Iteratorer

Iteratorer är som avancerade slingor som kan pausas. Iteratorer består av Nästa() funktion, som returnerar värdet och statusen gjort. De värde fältet är värdet i matrisen vid ett givet index. Gjort är det booleska värdet som returnerar statusen för färdigställande för iterationen genom slingan.

Här är ett exempel som visar hur iteratorer:

function fruitIter (frukter) {
låt index = 0;
lämna tillbaka {
nästa: function () {
avkastningsindex }
}
}
const fruitsArray = ["Mango", "Banan", "Druvor"];
const fruits = fruitIter (fruitsArray);
console.log (fruits.next (). värde);

Produktion:

Mango

När du passerar

frukterArray array i fruitIter () metoden returnerar den en iterator som är lagrad i frukt variabel. De index variabel i fruitIter () metoden initialiseras till 0. Denna metod returnerar Nästa() funktion som hjälper till går igenom matrisen. De Nästa() funktion kontrollerar om indexet är mindre än frukterArray längd. I så fall returnerar den två variabler: fruktnamnet vid det indexet och Gjort status. När dessa värden returneras ökar det också indexvärdet.

För att kontrollera hur denna metod fungerar och skriva ut fruktnamnet måste du ringa till Nästa() funktion på frukt iterator och få tillgång till dess värde.

Relaterad: Vad är en funktion i programmering?

Generatorer

Generatorer liknar Iteratorer men de returnerar flera värden. Dessa värden kallas avkastningsvärden. Generatorfunktioner skrivs med funktion* syntax. * betecknar att det inte är en normal funktion, utan en generator. Här är ett exempel på generatorer:

funktion* printFruits () {
ge "Mango";
ge "Banan";
ge "Druvor";
}
const fruit = printFruits ();
console.log (fruit.next ()); 

Produktion:

{value: 'Mango', done: false}

I det här exemplet, avkastning är iteratorn. När du ringer till funktionen printFruits ()och skriv ut fruit.next (), det ger dig ett objekt där du får värdet. De Gjort status anger om alla värden har iterats igenom.

Lär dig datastrukturer med ES6 -klasser i JavaScript

JavaScript ES6 gav stora framsteg inom kodning. Inte minst är det att bygga datastrukturer med ES6 -klasser. Skjuta på. pop, och stapla dig till toppen och bli ett JavaScript -proffs!

Hur man bygger datastrukturer med JavaScript ES6 -klasser

Med introduktionen av JavaScript ES6 kom anpassade datastrukturer. Så här skapar och tillämpar du dem.

Läs Nästa

Om författaren