Detailed explanation of iterators and generators in JavaScript_javascript skills

Processing each item in a collection is a very common operation. JavaScript provides many ways to iterate over a collection, from simple for and for each loops to map(), filter() and array comprehensions. ). In JavaScript 1.7, iterators and generators bring new iteration mechanisms to the core JavaScript syntax, and also provide a mechanism to customize the behavior of for...in and for each loops.

Iterator

An iterator is an object that accesses one element in a collection sequence at a time and keeps track of the current position of the iteration in the sequence. In JavaScript, an iterator is an object that provides a next() method that returns the next element in the sequence. This method throws a StopIteration exception when all elements in the sequence have been traversed.

Once an iterator object is created, it can be called explicitly by repeatedly calling next(), or implicitly using JavaScript's for...in and for each loops.

Simple iterators for iterating over objects and arrays can be created using Iterator():

Copy code The code is as follows:

var lang = { name: 'JavaScript', birthYear: 1995 };
var it = Iterator(lang);

Once initialization is complete, the next() method can be called to access the object's key-value pairs in sequence:

Copy code The code is as follows:

var pair = it.next(); //The key-value pair is ["name", "JavaScript"]
pair = it.next(); //The key-value pair is ["birthday", 1995]
pair = it.next(); //A `StopIteration` exception is thrown

The for…in loop can be used instead of explicitly calling the next() method. The loop automatically terminates when the StopIteration exception is thrown.

Copy code The code is as follows:

var it = Iterator(lang);
for (var pair in it)
Print(pair); //Output one [key, value] key-value pair in it each time

If you only want to iterate the key value of the object, you can pass the second parameter to the Iterator() function with the value true:

Copy code The code is as follows:

var it = Iterator(lang, true);
for (var key in it)
Print(key); //Output key value each time

One benefit of using Iterator() to access objects is that custom properties added to Object.prototype will not be included in the sequence object.

Iterator() can also be used on arrays:

Copy code The code is as follows:

var langs = ['JavaScript', 'Python', 'Haskell'];
var it = Iterator(langs);
for (var pair in it)
​​​ print(pair); //Each iteration outputs [index, language] key-value pair

Just like traversing an object, passing true as the second parameter will result in the traversal being the array index:

Copy code The code is as follows:

var langs = ['JavaScript', 'Python', 'Haskell'];
var it = Iterator(langs, true);
for (var i in it)
​​​ print(i); //Output 0, then 1, then 2

Use the let keyword to assign indexes and values ​​to block variables inside the loop, and you can also use Destructuring Assignment:

Copy code The code is as follows:

var langs = ['JavaScript', 'Python', 'Haskell'];
var it = Iterators(langs);
for (let [i, lang] in it)
          print(i ': ' lang); //Output "0: JavaScript" etc.

Declare a custom iterator

Some object representing a collection of elements should be iterated over in a specified way.

1. Iterating an object representing a range should return the numbers contained in the range one by one
2. The leaf nodes of a tree can be accessed using depth-first or breadth-first
3. Iterating over an object representing the results of a database query should be returned row by row, even if the entire result set has not yet been loaded into a single array
4. An iterator acting on an infinite mathematical sequence (like the Fibonacci sequence) should return results one after another without creating an infinite-length data structure

JavaScript allows you to write custom iteration logic and apply it to an object

We create a simple Range object containing low and high values:

Copy code The code is as follows:

function Range(low, high){
This.low = low;
This.high = high;
}

Now we create a custom iterator that returns a sequence containing all the integers in the range. The iterator interface requires us to provide a next() method to return the next element in the sequence or throw a StopIteration exception.

Copy code The code is as follows:

function RangeIterator(range){
This.range = range;
This.current = this.range.low;
}
RangeIterator.prototype.next = function(){
If (this.current > this.range.high)
          throw StopIteration;
      else
          return this.current ;
};

Our RangeIterator is instantiated with a range instance and maintains a current property to track the current sequence position.

Finally, in order for RangeIterator to be combined with Range, we need to add a special __iterator__ method for Range. It will be called when we try to iterate over a Range and should return a RangeIterator instance that implements the iteration logic.

Copy code The code is as follows:

Range.prototype.__iterator__ = function(){
        return new RangeIterator(this);
};

Once we have completed our custom iterator, we can iterate over a range instance:

Copy code The code is as follows:

var range = new Range(3, 5);
for (var i in range)
​​​ print(i); //Output 3, then 4, then 5

Generators: a better way to build iterators

Although custom iterators are a useful tool, careful planning is required when creating them because their internal state needs to be maintained explicitly.

The generator provides very powerful functions: it allows you to define a function that contains its own iteration algorithm, and it can automatically maintain its own state.

Generators are special functions that can serve as iterator factories. If a function contains one or more yield expressions, it is called a generator (Translator's Note: Node.js also needs to add * in front of the function name to indicate it).

Note: Only code blocks contained in

When a generator function is called, the function body will not be executed immediately, it will return a generator-iterator object. Each time the next() method of the generator-iterator is called, the function body will execute to the next yield expression and then return its result. When a function ends or a return statement is encountered, a StopIteration exception is thrown.

Use an example to explain better:

Copy code The code is as follows:

function simpleGenerator(){
​​ yield "first";
         yield "second";
         yield "third";
for (var i = 0; i           yield i;
}
 
var g = simpleGenerator();
Print(g.next()); //Output "first"
Print(g.next()); //Output "second"
Print(g.next()); //Output "third"
Print(g.next()); //Output 0
Print(g.next()); //Output 1
Print(g.next()); //Output 2
Print(g.next()); //Throw StopIteration exception

The generator function can be used directly as the __iterator__ method by a class, which can effectively reduce the amount of code where a custom iterator is required. Let’s rewrite Range using a generator:

Copy code The code is as follows:

function Range(low, high){
This.low = low;
This.high = high;
}
Range.prototype.__iterator__ = function(){
for (var i = this.low; i           yield i;
};
var range = new Range(3, 5);
for (var i in range)
​​​ print(i); //Output 3, then 4, then 5

Not all generators terminate, you can create a generator that represents an infinite sequence. The following generator implements a Fibonacci sequence, where each element is the sum of the previous two:

Copy code The code is as follows:

function fibonacci(){
var fn1 = 1;
var fn2 = 1;
while (1) {
var current = fn2;
           fn2 = fn1;
             fn1 = fn1 current;
                        yield current;
}
}
 
var sequence = fibonacci();
Print(sequence.next()); // 1
Print(sequence.next()); // 1
Print(sequence.next()); // 2
Print(sequence.next()); // 3
Print(sequence.next()); // 5
Print(sequence.next()); // 8
Print(sequence.next()); // 13

Generator functions can take parameters, and these parameters will be used the first time the function is called. A generator can be terminated (causing it to throw a StopIteration exception) by using the return statement. The following variant of fibonacci() takes an optional limit argument that terminates the function when a condition is triggered.

Copy code The code is as follows:

function fibonacci(limit){
var fn1 = 1;
var fn2 = 1;
while(1){
var current = fn2;
           fn2 = fn1;
             fn1 = fn1 current;
If (limit && current > limit)
           return;
                        yield current;
}
}

Advanced Generator Features

The generator can compute the yield return value on demand, which makes it possible to represent previously expensive sequence computation requirements, even infinite sequences as shown above.

In addition to the next() method, the generator-iterator object also has a send() method, which can modify the internal state of the generator. The value passed to send() will be treated as the result of the last yield expression, and the generator will be paused. Before you use the send() method to pass a specified value, you must call next() at least once to start the generator.

The following Fibonacci generator uses the send() method to restart the sequence:

Copy code The code is as follows:

function fibonacci(){
var fn1 = 1;
var fn2 = 1;
while (1) {
var current = fn2;
           fn2 = fn1;
             fn1 = fn1 current;
      var reset = yield current;
          if (reset) {
              fn1 = 1;
              fn2 = 1;
}
}
}
 
var sequence = fibonacci();
Print(sequence.next()); //1
Print(sequence.next()); //1
Print(sequence.next()); //2
Print(sequence.next()); //3
Print(sequence.next()); //5
Print(sequence.next()); //8
Print(sequence.next()); //13
Print(sequence.send(true)); //1
Print(sequence.next()); //1
Print(sequence.next()); //2
Print(sequence.next()); //3

Note: An interesting point is that calling send(undefined) is exactly the same as calling next(). However, when calling the send() method to start a new generator, any value other than undefined will throw a TypeError exception.

You can force a generator to throw an exception by calling the throw method and passing an exception value that it should throw. This exception will be thrown from the current context and pause the generator, similar to the current yield execution, except that it is replaced by a throw value statement.

If yield is not encountered during the handling of a thrown exception, the exception will be passed until the throw() method is called, and subsequent calls to next() will cause the StopIteration exception to be thrown.

Generators have a close() method to force the generator to end. Ending a generator has the following effects:

1. All valid finally clauses in the generator will be executed
2. If the finally clause throws any exception other than StopIteration, the exception will be passed to the caller of the close() method
3. The generator will terminate

Generator expression

An obvious disadvantage of array comprehensions is that they cause the entire array to be constructed in memory. The overhead is trivial when the input to the comprehension is a small array—but problems can arise when the input array is large or when a new expensive (or infinite) array generator is created.

Generators allow lazy computation of sequences, computing elements on demand when needed. A generator expression is syntactically almost the same as an array comprehension—it uses parentheses instead of square brackets (and for...in instead of for each...in)—but it creates a generator instead of an array, so You can delay the calculation. You can think of it as a short syntax for creating generators.

Suppose we have an iterator it that iterates over a huge sequence of integers. We need to create a new iterator to iterate over even numbers. An array comprehension will create an entire array of all even numbers in memory:

Copy code The code is as follows:

var doubles = [i * 2 for (i in it)];

The generator expression will create a new iterator and calculate even values ​​on demand when needed:

Copy code The code is as follows:

var it2 = (i * 2 for (i in it));
Print(it2.next()); //The first even number in it
Print(it2.next()); //The second even number in it

When a generator is used as a function argument, parentheses are used for function calls, meaning the outermost parentheses can be omitted:

Copy code The code is as follows:

var result = doSomething(i * 2 for (i in it));

End.