Chapter 8 Iterator and Generator
Section 1 Problems with loop statements
In loops and multiple loops, the behavior of tracking array indexes through variables can easily lead to program errors. The emergence of iterators aims to eliminate this complexity and reduce errors in the loop.
Section 2 What is an iterator?
Iterators are a special kind of object. It has some proprietary interfaces specifically designed for the iterative process. For example: the next() method, which is used to return a result object. The result object has two attributes: value and done. value represents the next value to be returned, done is a boolean value, when there is no more data to return, the value is true, otherwise it is false. If no more data is returned, the value of value is undefined.
Section 3 What is a generator?
1. A generator is a function that returns an iterator, which is represented by an asterisk "*" after the function keyword. The new keyword yield is also used in generator functions. The generator is also an important feature of ES6.
2. Whenever a yield statement is executed, the function will automatically stop executing.
3. Use the yield keyword to return any value or expression, so add elements to the iterator in batches through the generator function.
4. Note: Arrow functions cannot be used to create generators.
Section 4 Iterable objects and for-of loops
1. In ES6, all collection objects (arrays, Set collections, and Map collections) and strings are iterable objects, and these objects have default iterators. The newly added feature of for-of loop in ES needs to use these functions of iterable objects.
2. Since objects with Symbol and iterator properties have a default iterator, it can be used to determine whether the object is an iterable object. For example:
function isIterable(object)
{
return typeof object[Symbol.iterator] === "function";
}
console.log( isIterable([1,2,3]) ); //true
console.log( isIterable(["Hello"]) ); //true
console.log( isIterable( new Map() ) ); //true
console.log( isIterable( new Set() ) ); //true
console.log( isIterable( new WeakMap() ) ); //true
console.log( isIterable( new WeakSet() ) ); //true
Section 5 Built-in Iterator
1. In ES6, there are three types of collection objects: arrays, Map collections, and Set collections. There are three built-in iterators in these three types of collections:
· Entries() returns an iterator whose value is multiple key-value pairs;
· Values() returns an iterator whose value is the value of the collection;
· Keys() returns an iterator whose value is all the keys of the collection.
Note: These three iterators can be used in all three types of collections.
2. String iterator
ES5 stipulates that the characters in the string can be accessed through square brackets, and text[0] can get the first character of the string text, and so on. Since square brackets operate on code units rather than characters, double-byte characters cannot be accessed correctly.
In ES6, Unicode is fully supported (see Chapter 2), and the default iterator of the string can be changed to make it operate on characters instead of code units. At this point, you can output the correct content through a for-of loop.
3. NodeList Iterator
Since ES6 added the default iterator, the NodeList type defined in the DOM also has a default iterator, and its behavior is exactly the same as the default iterator of the array.
Section 6 The spread operator and non-array iterable objects
If you want to convert an iterable object into an array, using the spread operator is the easiest way. For example:
let set = new Set([1, 2, 3, 3, 3, 4, 5]),
array = [...set];
console.log(array); //[1, 2, 3, 4, 5]
Section 7 Advanced Iterator Functions
1. The ability to pass values to iterators is very important;
2. In addition to passing data to the iterator, you can also pass error conditions to it, and then a series of operations such as debugging the next() method will be involved in this. When encountering related problems, please refer to the explanations in P.166-P.171.
3. The delegate generator is equivalent to putting multiple other generators together. Then execute them one by one. If you encounter related problems, please refer to P.171-P.173.
Section 8 Asynchronous Task Execution
1. Since the generator supports the suspension of code execution in functions, this idea can be applied to asynchronous programming and asynchronous function processing, and use them (generators, iterators) to create more concise asynchronous code. The generator and yield statement are mainly used here. When encountering such related problems, please refer to P.174-P.179.
2. Add a delay method to the synchronous function, that is, you can turn it into an asynchronous function. For example:
function fetchData()
{
return function(callback)
{
setTimeout(function() {
callback(null, "Hi");
}, 50);
}
}
(End of this section)