Jump to content
Wikibooks The Free Textbook Project

JavaScript/Generators

From Wikibooks, open books for an open world



The term generator denotes a technique to generate a sequence of 'anything': numbers, strings, rows of database queries, elements of an array, nodes of a DOM tree, ...

It's used to avoid any memory overloading, by splitting the data in small chunks.

To use them, you must define a generator function[1] first. Such functions are notated with an asterisk * directly behind the keyword function, e.g., function* myGenerator(){...}.

When called, the function will not run instantly. It only runs just before the first occurrence of a yield statement and returns a 'Generator object'. This 'Generator object' offers a next method. Calling next again and again returns the sequence elements one after the next. The elements arise by each yield that is reached within the generator function.

Examples

[edit | edit source ]
  • The script generates a sequence of 4 integers.
function*fourInts(){
letint=0;
while(int<4){
yieldint;// each .next() receives the current value of 'int'
int++;
}
}
constgen=fourInts();// creation
alert(gen.next().value);// 0
alert(gen.next().value);// 1
alert(gen.next().value);// 2
alert(gen.next().value);// 3
alert(gen.next().value);// undefined
  • Every next() call returns not only a value; there is also a boolean done. Hence you can call the generator in loops.
function*fourInts(){
letint=0;
while(int<4){
yieldint;
int++;
}
}
constgen=fourInts();// creation
do{
consttmp=gen.next();
if(tmp.done){
break;
}else{
alert(tmp.value);// 0, 1, 2, 3
}
}while(true)
  • Generation out of an array, a database request, or a tree traversal.
function*arrayElements(){
// for simplicity, we use an array; database queries or tree traversals
// are more realistic.
constmyArray=["yellow","green","blue"];
for(constelemofmyArray){
yieldelem;
}
}
constsequence=arrayElements();// creation
do{
consttmp=sequence.next();
if(tmp.done){
break;
}else{
alert(tmp.value);// "yellow", "green", "blue"
}
}while(true)
  • Creation of the infinite sequence of all even numbers.
function*evenNumbers(){
for(leti=0;true;i=i+2){
yieldi;
}
}
constsequence=evenNumbers();// creation
leti=0;
while(i<20){
i=sequence.next().value;
alert(i);// 0, 2, 4, ...
}

Parameters

[edit | edit source ]

The generator function may receive parameters. In this example, the 'pageSize' defines the number of array elements to be returned.

function*pagination(arr,pageSize){
for(leti=0;i<arr.length;i=i+pageSize){
yieldarr.slice(i,i+pageSize);
}
}
constarr=[1,2,3,4,5,6,7]
constpage=pagination(arr,3);
alert(page.next().value);// { value: [1, 2, 3], done: false }
alert(page.next().value);// { value: [4, 5, 6], done: false }
alert(page.next().value);// { value: [7], done: false }
alert(page.next().value);// { value: undefined, done: true }

References

[edit | edit source ]

AltStyle によって変換されたページ (->オリジナル) /