Sedan 2015 har EcmaScript6 (ES6) medfört många framsteg inom JavaScript-kodning. Många moderna koncept introducerades till JavaScript, vilket avsevärt förbättrade kodningsupplevelsen. I den här artikeln kommer du att lära dig om iteratorer och generatorer i JavaScript.
Iteratorer och generatorer är två olika koncept, men de används på liknande sätt. De används för att iterera genom arrayer och objekt i JavaScript.
Iteratorer
Iteratorer är som avancerade loopar som kan pausas. Iteratorer består av Nästa() funktion, som returnerar värdet och statusen klar. De värde field är värdet i arrayen vid ett givet index. Gjort är det booleska värdet som returnerar status för slutförande för iterationen genom slingan.
Här är ett exempel som visar hur iteratorer:
function fruitIter(fruits){
let index = 0;
return {
next: function(){
return index < fruits.length ? { value: fruits[index++], done: false } : {done: true}
}
}
}
const fruitsArray = ["Mango", "Banana", "Grapes"];
const fruits = fruitIter(fruitsArray);
console.log(fruits.next().value);
Produktion:
Mango
När du passerar fruitsArray array i fruitIter() metoden returnerar den en iterator som är lagrad i frukter variabel. De index variabel i fruitIter() metoden initieras till 0. Denna metod returnerar Nästa() funktion som hjälper till att loopa genom arrayen. De Nästa() funktionen kontrollerar om indexet är mindre än fruitsArray längd. Om så är fallet returnerar den två variabler: fruktnamnet vid det indexet och Gjort status. Samtidigt som dessa värden returneras, ökar den också indexvärdet.
För att kontrollera hur den här metoden fungerar och skriva ut fruktnamnet måste du ringa till Nästa() funktion på frukter iterator och få tillgång till dess värde.
Generatorer
Generatorer liknar Iteratorer men de returnerar flera värden. Dessa värden kallas avkastningsvärden. Generatorfunktioner skrivs med hjälp av funktion* syntax. * anger att det inte är en normal funktion, utan en generator. Här är ett exempel på generatorer:
function* printFruits(){
yield "Mango";
yield "Banana";
yield "Grapes";
}
const fruit = printFruits();
console.log(fruit.next());
Produktion:
{value: 'Mango', done: false}
I det här exemplet, avkastning är iteratorn. När du anropar 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 itererats igenom.
Lär dig datastrukturer med ES6-klasser i JavaScript
JavaScript ES6 gav många framsteg i kodningsmetoder. Inte minst är att bygga datastrukturer med ES6-klasser. Tryck. pop, och stapla dig till toppen och bli ett JavaScript-proffs!
Om författaren
Unnati Bamania (14 artiklar publicerade)
Unnati är en entusiastisk fullstack-utvecklare. Hon älskar att bygga projekt med hjälp av olika programmeringsspråk. I henne free tid, hon älskar att spela gitarr och är en matlagningsentusiast.
Mer från Unnati Bamania
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
