The syntax of the ES6 Generator function

1. Introduction

Basic concepts

Generator are an asynchronous programming solution provided by ES6, 异步编程 the syntax behaves completely differently from traditional functions. This chapter details the syntax and APIs of the Generator function, and its asynchronous programming applications are described in the chapter Asynchronous Applications of the Generator function.

Generator functions have several perspectives of understanding. Syntax, you can first understand that the Generator function is a state 状态机 multiple internal states.

Executing the Generator function returns a traverser object, that is, the Generator function is a traverser object generator in addition to a state machine. The returned 遍历器对象 which can traverse each state inside the Generator function in turn.

Formally, Generator function is a normal 普通函数 but has two characteristics. One is that there is an asterisk between the function keyword and the function name, and the other is that the yield expression is used inside the function body to define different internal states (yield means "output" in English).

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
var hw = helloWorldGenerator();

The above code defines a Generator function, helloWorldGenerator, which has two yield expressions (hello and world) inside it, that is, the function has three states: hello, world, and return statements (end execution).

The Generator function is then called in the same way as a normal function, with a pair of parentheses after the function name. The difference is that when the Generator function is called, the function is not executed and does not return the result of the function run, but rather a pointer object to the internal state, the traverser object described in the previous chapter.

Next, you must call the next method of the traverser object so that the pointer moves to the next state. T hat is, each time the next method is called, the internal pointer starts at the head of the function or where it last stopped until the next yield expression (or return statement) is encountered. In other words, the Generator function is executed in segments, the yield expression is a tag that pauses execution, and the next method can resume execution.

hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }

The above code calls the next method four times in total.

On the first call, the Generator function starts executing until the first yield expression is encountered. The next method returns an object whose value property is the value of the current yield expression hello, and the value false of the done property, which indicates that the traversal is not over yet.

On the second call, the Generator function executes from where the last yield expression stopped until the next yield expression. The value property of the object returned by the next method is the value world of the current yield expression, and the value false of the done property indicates that the traversal is not over yet.

On the third call, the Generator function executes from where the last yield expression stopped until the return statement (if there is no return statement, until the end of the function). The value property of the object returned by the next method is the value of the expression immediately following the return statement (if there is no return statement, the value property's value is undefined), and the value of the done property is true, indicating that the traversal is over.

The fourth call, at which point the Generator function is already running, the next method returns the value property of the object as undefined and the done property as true. The next method is called later and returns this value.

To summarize, call the Generator function and return a traverser object, representing the internal pointer to the Generator function. L ater, each time you call the next method of the traverser object, an object with value and done properties is returned. The value property represents the value of the current internal state, the value of the expression after the yield expression, and the done property is a Boolean value that indicates whether the traversal ends.

ES6 does not specify where the asterisk between the function keyword and the function name is written. This results in the following writing passing.

function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }

Because the Generator function is still a normal function, the general writing is the third type above, the asterisk followed by the function keyword. This is also the way this book is written.

2. yield expression

Because the Generator function returns a traverser object, only calling the next method traverses the next internal state, providing a function that can be paused. yield expression is 暂停标志

The next method of the traverser object runs as follows.

(1) When a yield expression is encountered, the subsequent action is paused and the value of the expression immediately following the yield is used as the value property value of the returned object.

(2) The next time the next method is called, continue down until the next yield expression is encountered.

(3) If no new yield expression is encountered, it runs until the end of the function until the return statement, and the value of the expression after the return statement is used as the value property value of the returned object.

(4) If the function does not have a return statement, the value property value of the returned object is undefined.

Note that the expression after the yield expression is executed only when the next method is called and the internal pointer points to the statement, thus providing JavaScript with the syntax of manual Lazy Evaluation.

function* gen() {
  yield  123 + 456;
}

In the above code, the expression 123 plus 456 after yield is not evaluated immediately and will only be evaluated when the next method moves the pointer to this sentence.

Yield expressions are similar to and different from return statements. S imilarly, you can return the value of the expression that follows the statement. T he difference is that each time you encounter yield, the function pauses execution and continues back from that location the next time, while the return statement does not have the function of location memory. I n a function, only one (or one) return statement can be executed, but multiple (or more) yield expressions can be executed. N ormal functions can only return one value because they can only be executed once; Generator functions can return a series of values because there can be as many yields as anywhere. From another point of view, it can also be said that Generator generates a series of values, which is the place of its name (in English, the word generator means "generator").

The Generator function can become a simple suspended execution function without the yield expression.

function* f() {
  console.log('执行了！')
}
var generator = f();
setTimeout(function () {
  generator.next()
}, 2000);

In the above code, the function f, if it is a normal function, is executed when the variable generator is assigned a value. However, function f is a Generator function that becomes executed only when the next method is called.

It is also important to note that yield expressions can only be used in Generator functions and can be used elsewhere to report errors.

(function (){
  yield 1;
})()
// SyntaxError: Unexpected number

The above code uses the yield expression in a normal function, resulting in a synth error.

Here's another example.

var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
  a.forEach(function (item) {
    if (typeof item !== 'number') {
      yield* flat(item);
    } else {
      yield item;
    }
  });
};
for (var f of flat(arr)){
  console.log(f);
}

The above code also produces a syntmeal error because the argument to the forEach method is a normal function, but the yield expression is used inside (the yield expression is also used in this function, as detailed later). One way to modify this is to use the for loop between .

var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
  var length = a.length;
  for (var i = 0; i < length; i++) {
    var item = a[i];
    if (typeof item !== 'number') {
      yield* flat(item);
    } else {
      yield item;
    }
  }
};
for (var f of flat(arr)) {
  console.log(f);
}
// 1, 2, 3, 4, 5, 6

In addition, if the yield expression is used in another expression, it must be placed in parentheses.

function* demo() {
  console.log('Hello' + yield); // SyntaxError
  console.log('Hello' + yield 123); // SyntaxError
  console.log('Hello' + (yield)); // OK
  console.log('Hello' + (yield 123)); // OK
}

The yield expression is used as a function argument or placed to the right of the assignment expression without parentheses.

function* demo() {
  foo(yield 'a', yield 'b'); // OK
  let input = yield; // OK
}

Relationship with the Iterator interface

As the previous chapter said, the Symbol.iterator method for any object is equal to the object's traverser generator, and calling the function returns a traverser object for that object.

Because the Generator function is the traverser generator, Generator to the Symbol.iterator object, making the object have an Iterator interface.

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};
[...myIterable] // [1, 2, 3]

In the above code, Generator function is assigned to Symbol.iterator property, myIterable object has an Iterator interface that can be ... The operator traversed.

After the Generator function is executed, a traverser object is returned. The object itself also has the Symbol.iterator property, which returns itself after execution.

function* gen(){
  // some code
}
var g = gen();
g[Symbol.iterator]() === g
// true

In the code above, gen is a Generator function that calls it to generate a traverser object g. Its Symbol.iterator property, which is also a traverser object generator, is executed and returned to itself.

2. The parameters of the next method

yield expression itself does not return a value, or always returns a undefined. The next method can take an argument that is treated as the return value of the previous yield expression.

function* f() {
  for(var i = 0; true; i++) {
    var reset = yield i;
    if(reset) { i = -1; }
  }
}
var g = f();
g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

The above code first defines a Generator function Generator that can run indefinitely, and if the next method does not have parameters, the value of the variable reset is always undefined each time it runs to the yield expression. When the next method takes a parameter true, the variable reset is reset to this parameter (i.e. true), so i is equal to -1, and the next cycle increments from -1.

This feature has important grammatical significance. T he Generator function runs from pause to resume, and its context state remains the same. W ith the parameters of the next method, there is a way to continue injecting values into the inside of the function body after the Generator function has started running. That is, you can adjust the function behavior by injecting different values from the outside to the inside at different stages of the Generator function's run.

Let's look at another example.

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}
var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

In the above code, the second time the next method is run without parameters, the value of y is equal to 2 x undefined (that is, NaN), divided by 3 and then NaN, so the value property of the returned object is equal to NaN. The next method is run without parameters for the third time, so z is equal to undefined, and the value property of the returned object is equal to 5 plus NaN plus undefined, that is, NaN.

If you provide parameters to the next method, the return results are completely different. The next method of b is returned the first time the code above calls the next method of b, and the next method is called a second time, setting the value of the previous yield expression to 12, so y equals 24 and returns y / 3 The value of is 8; the third call to the next method, setting the value of the previous yield expression to 13, so z is equal to 13, when x is equal to 5, y is equal to 24, and the value of the return statement is equal to 42.

Note that because the arguments of the next method represent the return value of the previous yield expression, passing the arguments is not valid the first time the next method is used. T he V8 engine ignores the parameters the first time the next method is used, and the parameters are valid only if they start with the next method the second time. Semantically, the first next method is used to start the traverser object, so there are no parameters.

Look at another example of entering a value inside the Generator function through the parameters of the next method.

function* dataConsumer() {
  console.log('Started');
  console.log( 1. ${yield} );
  console.log( 2. ${yield} );
  return 'result';
}
let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b

The above code is a very intuitive example of entering a value into the Generator function each time via the next method and then printing it out.

If you want to enter a value the first time you call the next method, you can wrap another layer outside the Generator function.

function wrapper(generatorFunction) {
  return function (...args) {
    let generatorObject = generatorFunction(...args);
    generatorObject.next();
    return generatorObject;
  };
}
const wrapped = wrapper(function* () {
  console.log( First input: ${yield} );
  return 'DONE';
});
wrapped().next('hello!')
// First input: hello!

In the above code, the Generator function can't enter parameters the first time it calls the next method without wrapper wrapping a layer first.

3. for... Of loop

for...of loop automatically traverses Generator object generated when the Generator function Iterator and the next method no longer needs to be called.

function* foo() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
  return 6;
}
for (let v of foo()) {
  console.log(v);
}
// 1 2 3 4 5

The above code uses for... o f loops, showing the values of five yield expressions in turn. I t is important to note here that once the next method returns the object's done property to true, for... T he of loop aborts and does not contain the return object, so the return statement in the above code returns 6 that is not included in the for... of the loop.

Here's a take advantage of the Generator function and for... Of loop, an example of implementing the Fibonachi number column.

function* fibonacci() {
  let [prev, curr] = [0, 1];
  for (;;) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}
for (let n of fibonacci()) {
  if (n > 1000) break;
  console.log(n);
}

As can be seen from the code above, use for... The next method is not required for the statement.

Take advantage of for... O f loops, you can write a way to traverse any object. N ative JavaScript objects do not have traversal interfaces and cannot use for... Of loops, it can be used by adding this interface to the Generator function.

function* objectEntries(obj) {
  let propKeys = Reflect.ownKeys(obj);
  for (let propKey of propKeys) {
    yield [propKey, obj[propKey]];
  }
}
let jane = { first: 'Jane', last: 'Doe' };
for (let [key, value] of objectEntries(jane)) {
  console.log( ${key}: ${value} );
}
// first: Jane
// last: Doe

In the code above, the object jane native does not have an Iterator interface and cannot use for... o f traversal. A t this point, we add the traverser interface to it through the Generator function objectEntries, and we can use for... O f traversed. Another way to add a traverser interface is to add the Generator function to the symbol.iterator property of the object.

function* objectEntries() {
  let propKeys = Object.keys(this);
  for (let propKey of propKeys) {
    yield [propKey, this[propKey]];
  }
}
let jane = { first: 'Jane', last: 'Doe' };
jane[Symbol.iterator] = objectEntries;
for (let [key, value] of jane) {
  console.log( ${key}: ${value} );
}
// first: Jane
// last: Doe

Except for... O utside the loop, the extension operator (... ) , deconstructed assignments, and called inside the Array.from method, are traverser interfaces. This means that they can all use the Iterator object returned by the Generator function as an argument.

function* numbers () {
  yield 1
  yield 2
  return 3
  yield 4
}
// 扩展运算符
[...numbers()] // [1, 2]
// Array.from 方法
Array.from(numbers()) // [1, 2]
// 解构赋值
let [x, y] = numbers();
x // 1
y // 2
// for...of 循环
for (let n of numbers()) {
  console.log(n)
}
// 1
// 2

4. Generator.prototype.throw()

Generator function returns a traverser object that has throw that throws an error outside the function body and then captures it inside the Generator function.

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log('内部捕获', e);
  }
};
var i = g();
i.next();
try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b

In the code above, the traverser object i throws two errors in a row. T he first error is captured by the catch statement inside the Generator function. i The second throw error, because the catch statement inside the Generator function has been executed and will no longer catch the error, the error is thrown out of the Generator function body and captured by the catch statement outside the function body.

The throw method can accept an argument that is received by the catch statement and is recommended to throw an instance of the Error object.

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log(e);
  }
};
var i = g();
i.next();
i.throw(new Error('出错了！'));
// Error: 出错了！(…)

Note that don't confuse the throw method of the traverser object with the global throw command. E rrors in the above code are thrown using the throw method of the traverser object, not with the throw command. The latter can only be captured by catch statements outside the function body.

var g = function* () {
  while (true) {
    try {
      yield;
    } catch (e) {
      if (e != 'a') throw e;
      console.log('内部捕获', e);
    }
  }
};
var i = g();
i.next();
try {
  throw new Error('a');
  throw new Error('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 外部捕获 [Error: a]

The above code only captures a because the catch statement block outside the function body, after capturing the thrown a error, will not continue with the remaining statements in the try block.

If the Generator function does not have a try deployed on-premises... c atch block, then the throw method throws an error that will be external try... Catch block capture.

var g = function* () {
  while (true) {
    yield;
    console.log('内部捕获', e);
  }
};
var i = g();
i.next();
try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 外部捕获 a

In the code above, the Generator function g does not have try deployed on-premises... catch block, so the thrown error is caught directly by the external catch block.

If the Generator function is inside and outside, there is no try deployed... catch code block, then the program will report errors and interrupt execution directly.

var gen = function* gen(){
  yield console.log('hello');
  yield console.log('world');
}
var g = gen();
g.next();
g.throw();
// hello
// Uncaught undefined

In the code above, after g.throw throwing an error, there is no try... Catch blocks of code can catch this error, causing the program to report errors and interrupt execution.

Errors thrown by the throw method are internally caught, provided that the next method must be executed at least once.

function* gen() {
  try {
    yield 1;
  } catch (e) {
    console.log('内部捕获');
  }
}
var g = gen();
g.throw(1);
// Uncaught 1

In the above code, the next method was not executed once when g.throw(1) was executed. A t this point, the thrown error is not caught internally, but is thrown directly outside, causing the program to make an error. This behavior is actually very understandable, because the first execution of the next method is equivalent to starting the internal code that executes the Generator function, otherwise the Generator function has not yet started executing, when the throw method throws the wrong way and can only be thrown outside the function.

Once the throw method is captured, the next yield expression is executed. That is, the next method is executed once.

var gen = function* gen(){
  try {
    yield console.log('a');
  } catch (e) {
    // ...
  }
  yield console.log('b');
  yield console.log('c');
}
var g = gen();
g.next() // a
g.throw() // b
g.next() // c

In the above code, after the g.throw method is captured, the next method is executed automatically once, so b is printed. Y ou can also see that as long as the Generator function is on-premises, try... catch block, then the throw method of the traverser throws an error that does not affect the next traversal.

In addition, the throw command is independent of the g.throw method and does not affect each other.

var gen = function* gen(){
  yield console.log('hello');
  yield console.log('world');
}
var g = gen();
g.next();
try {
  throw new Error();
} catch (e) {
  g.next();
}
// hello
// world

In the above code, the error thrown by the throw command does not affect the state of the traverser, so the next method is executed twice and the correct action is performed.

The mechanism of catching errors in this function greatly facilitates the handling of errors. M ultiple yield expressions, you can use only one try... C atch blocks of code to catch errors. If you use callback function writing to catch multiple errors, you have to write an error-handling statement inside each function, and now you can write a catch statement only once inside the Generator function.

Errors thrown outside the generator function can be caught inside the function body, and in turn, errors thrown inside the Generator function can also be caught by catch outside the function.

function* foo() {
  var x = yield 3;
  var y = x.toUpperCase();
  yield y;
}
var it = foo();
it.next(); // { value:3, done:false }
try {
  it.next(42);
} catch (err) {
  console.log(err);
}

In the above code, the second next method sends a parameter 42 into the body of the function, the value is not the toUpperCase method, so a TypeError error is thrown and caught by catch outside the function body.

Once an error is thrown during Generator execution and is not captured internally, it is no longer executed. If the next method is called later, an object with a value property equal to undefined and the done property equal to true is returned, i.e. the JavaScript engine considers the Generator to be running out.

function* g() {
  yield 1;
  console.log('throwing an exception');
  throw new Error('generator broke!');
  yield 2;
  yield 3;
}
function log(generator) {
  var v;
  console.log('starting generator');
  try {
    v = generator.next();
    console.log('第一次运行next方法', v);
  } catch (err) {
    console.log('捕捉错误', v);
  }
  try {
    v = generator.next();
    console.log('第二次运行next方法', v);
  } catch (err) {
    console.log('捕捉错误', v);
  }
  try {
    v = generator.next();
    console.log('第三次运行next方法', v);
  } catch (err) {
    console.log('捕捉错误', v);
  }
  console.log('caller done');
}
log(g());
// starting generator
// 第一次运行next方法 { value: 1, done: false }
// throwing an exception
// 捕捉错误 { value: 1, done: false }
// 第三次运行next方法 { value: undefined, done: true }
// caller done

The above code runs the next method three times, throws an error on the second run, and then ends the Generator function on the third run and is no longer executed.

5. Generator.prototype.return()

Generator function returns the traverser object, and there return that returns a given value and ends the traversal generator function.

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
var g = gen();
g.next()        // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }

In the above code, after the traverser object g calls the return method, the value property that returns the value is the parameter foo of the return method. Also, the traversal of the Generator function is terminated, the done property that returns the value is true, and the next method is called later, and the done property always returns true.

If no arguments are provided when the return method is called, the value property that returns the value is undefined.

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
var g = gen();
g.next()        // { value: 1, done: false }
g.return() // { value: undefined, done: true }

If there is a try inside the Generator function... The final block of code, and the try block is executing, then the return method causes an immediate entry into the final block of code, and the entire function does not end until it is executed.

function* numbers () {
  yield 1;
  try {
    yield 2;
    yield 3;
  } finally {
    yield 4;
    yield 5;
  }
  yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }

In the above code, after calling the return() method, the final block of code is executed, the rest of the code inside the try is not executed, and then waits until the final block is executed before returning the return value specified by the return() method.

6. Commonality of next(), throw(), return().

next() throw() return() methods are essentially the same thing and can be understood together. Their role is to get the Generator function to resume execution and replace the yield expression with a different statement.

next() is to replace the yield expression with a value.

const g = function* (x, y) {
  let result = yield x + y;
  return result;
};
const gen = g(1, 2);
gen.next(); // Object {value: 3, done: false}
gen.next(1); // Object {value: 1, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = 1;

In the above code, the second next(1) method is equivalent to replacing the yield expression with a value of 1. If the next method does not have parameters, it is equivalent to replacing it with undefined.

throw() is to replace the yield expression with a throw statement.

gen.throw(new Error('出错了')); // Uncaught Error: 出错了
// 相当于将 let result = yield x + y
// 替换成 let result = throw(new Error('出错了'));

return() is the replacement of the yield expression with a return statement.

gen.return(2); // Object {value: 2, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = return 2;

7. yield-expression

If inside the Generator function, call another Generator function. The traversal needs to be done manually within the function body of the former.

function* foo() {
  yield 'a';
  yield 'b';
}
function* bar() {
  yield 'x';
  // 手动遍历 foo()
  for (let i of foo()) {
    console.log(i);
  }
  yield 'y';
}
for (let v of bar()){
  console.log(v);
}
// x
// a
// b
// y

In the code above, foo and bar are generator functions, and calling foo in bar requires manual traversal of foo. If you have more than one Generator function nested, it can be cumbersome to write.

ES6 provides a yield-expression as a work-through to execute another Generator function in one Generator function.

function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}
// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}
// 等同于
function* bar() {
  yield 'x';
  for (let v of foo()) {
    yield v;
  }
  yield 'y';
}
for (let v of bar()){
  console.log(v);
}
// "x"
// "a"
// "b"
// "y"

Let's look at another example of comparison.

function* inner() {
  yield 'hello!';
}
function* outer1() {
  yield 'open';
  yield inner();
  yield 'close';
}
var gen = outer1()
gen.next().value // "open"
gen.next().value // 返回一个遍历器对象
gen.next().value // "close"
function* outer2() {
  yield 'open'
  yield* inner()
  yield 'close'
}
var gen = outer2()
gen.next().value // "open"
gen.next().value // "hello!"
gen.next().value // "close"

In the example above, outer2 uses yield, and outer1 does not. As a result, outer1 returns a traverser object, and outer2 returns the internal value of the traverser object.

From a syntax point of view, if the yield expression is followed by a traverser object, you need to add an asterisk after the yield expression to indicate that it returns a traverser object. This is called a yield-expression.

let delegatedIterator = (function* () {
  yield 'Hello!';
  yield 'Bye!';
}());
let delegatingIterator = (function* () {
  yield 'Greetings!';
  yield* delegatedIterator;
  yield 'Ok, bye.';
}());
for(let value of delegatingIterator) {
  console.log(value);
}
// "Greetings!
// "Hello!"
// "Bye!"
// "Ok, bye."

In the code above, delegatingIterator is the agent, and delegatedIterator is the agent. B ecause the value obtained by the yield-delegatedIterator statement is a traverser, it is represented by an asterisk. The result is a traversal that traverses multiple Generator functions with a recursive effect.

The Generator function after yield (when there is no return statement) is equivalent to deploying a for... Of loop.

function* concat(iter1, iter2) {
  yield* iter1;
  yield* iter2;
}
// 等同于
function* concat(iter1, iter2) {
  for (var value of iter1) {
    yield value;
  }
  for (var value of iter2) {
    yield value;
  }
}

The code above states that the Generator function after yield (when there is no return statement) is just for... A short-form form of, can completely replace the former with the latter. Conversely, when there is a return statement, you need to get the value of the return statement in the form of var value s yield iterator.

If the yield is followed by an array, the array members are traversed because the array natively supports the traverser.

function* gen(){
  yield* ["a", "b", "c"];
}
gen().next() // { value:"a", done:false }

In the code above, if the yield command is followed by an asterisk, the entire array is returned, and the asterisk is added to indicate that the array's traverser object is returned.

In fact, any data structure that has an Iterator interface can be traversed by yield.

let read = (function* () {
  yield 'hello';
  yield* 'hello';
})();
read.next().value // "hello"
read.next().value // "h"

In the above code, the yield expression returns the entire string, and the yield statement returns a single character. Because the string has an Iterator interface, it is traversed by yield.

If the generator function of the proxy has a return statement, you can return data to the Generator function that is proxying it.

function* foo() {
  yield 2;
  yield 3;
  return "foo";
}
function* bar() {
  yield 1;
  var v = yield* foo();
  console.log("v: " + v);
  yield 4;
}
var it = bar();
it.next()
// {value: 1, done: false}
it.next()
// {value: 2, done: false}
it.next()
// {value: 3, done: false}
it.next();
// "v: foo"
// {value: 4, done: false}
it.next()
// {value: undefined, done: true}

The above code will have output on the screen the fourth time the next method is called, because the return statement of the function foo provides a return value to the function bar.

Let's look at another example.

function* genFuncWithReturn() {
  yield 'a';
  yield 'b';
  return 'The result';
}
function* logReturned(genObj) {
  let result = yield* genObj;
  console.log(result);
}
[...logReturned(genFuncWithReturn())]
// The result
// 值为 [ 'a', 'b' ]

In the code above, there are two traversals. T he first is the traverser object returned by the extended operator traversal function logReturned, and the second is the traverser object returned by the yield statement traversal function genFuncWithReturn. T he effect of these two traversals is superimposed and eventually manifests it as the traverser object returned by the extended operator traversal function genFuncWithReturn. T herefore, the final data expression results in a value equal to 'a', 'b'. However, the return value of the return statement of the function genFuncWithReturn, The result, is returned to the result variable inside the function logReturned, so there is terminal output.

The yield command makes it easy to remove all members of a nested array.

function* iterTree(tree) {
  if (Array.isArray(tree)) {
    for(let i=0; i < tree.length; i++) {
      yield* iterTree(tree[i]);
    }
  } else {
    yield tree;
  }
}
const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];
for(let x of iterTree(tree)) {
  console.log(x);
}
// a
// b
// c
// d
// e

Because of the extended operator ... The Iterator interface is called by default, so this function above can also be used for tiles for nested arrays.

[...iterTree(tree)] // ["a", "b", "c", "d", "e"]

Here's a slightly more complex example of traversing a full binary tree with a yield statement.

// 下面是二叉树的构造函数，
// 三个参数分别是左树、当前节点和右树
function Tree(left, label, right) {
  this.left = left;
  this.label = label;
  this.right = right;
}
// 下面是中序（inorder）遍历函数。
// 由于返回的是一个遍历器，所以要用generator函数。
// 函数体内采用递归算法，所以左树和右树要用yield*遍历
function* inorder(t) {
  if (t) {
    yield* inorder(t.left);
    yield t.label;
    yield* inorder(t.right);
  }
}
// 下面生成二叉树
function make(array) {
  // 判断是否为叶节点
  if (array.length == 1) return new Tree(null, array[0], null);
  return new Tree(make(array[0]), array[1], make(array[2]));
}
let tree = make([[['a'], 'b', ['c']], 'd', [['e'], 'f', ['g']]]);
// 遍历二叉树
var result = [];
for (let node of inorder(tree)) {
  result.push(node);
}
result
// ['a', 'b', 'c', 'd', 'e', 'f', 'g']

8. Generator function as an object property

If the property of an object is a Generator function, you can write it in the following form.

let obj = {
  * myGeneratorMethod() {
    ···
  }
};

In the code above, the myGeneratorMethod property is preceded by an asterisk indicating that the property is a Generator function.

Its full form is as follows, and the above writing is equivalent.

let obj = {
  myGeneratorMethod: function* () {
    // ···
  }
};

9. This of the Generator function

The Generator function always returns a traverser, which ES6 states is an instance of the Generator function and inherits the Generator object prototype the Generator function.

function* g() {}
g.prototype.hello = function () {
  return 'hi!';
};
let obj = g();
obj instanceof g // true
obj.hello() // 'hi!'

The above code indicates that the generator function g returns the traverser obj, which is an instance of g, and inherits g.prototype. However, if you treat g as a normal constructor, it does not work because g always returns a traverser object, not this object.

function* g() {
  this.a = 11;
}
let obj = g();
obj.next();
obj.a // undefined

In the code above, the Generator function g adds a property a to the object, but the obj object does not get the property.

Generator functions can't be used with new commands, between errors.

function* F() {
  yield this.x = 2;
  yield this.y = 3;
}
new F()
// TypeError: F is not a constructor

In the code above, the new command is used with constructor F, and the result is an error because F is not a constructor.

So, is there a way for the Generator function to return a normal instance of the object, both with the next method and with a normal this?

Here's a work-through. F irst, an empty object is generated that binds this inside the Generator function using the call method. Thus, after the constructor is called, the empty object is an instance object of the Generator function.

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var obj = {};
var f = F.call(obj);
f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}
obj.a // 1
obj.b // 2
obj.c // 3

In the above code, first the this object inside F binds the obj object, then calls it and returns an Iterator object. T his object executes the next method three times (because there are two yield expressions inside F) to complete the operation of all code inside F. At this point, all internal properties are bound to the obj object, so the obj object becomes an instance of F.

In the above code, the traverser object f is executed, but the resulting object instance is obj, is there any way to unify the two objects?

One way to do this is to replace obj with F.prototype.

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var f = F.call(F.prototype);
f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}
f.a // 1
f.b // 2
f.c // 3

Then change F to a constructor and you can execute a new command on it.

function* gen() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
function F() {
  return gen.call(gen.prototype);
}
var f = new F();
f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}
f.a // 1
f.b // 2
f.c // 3

Meaning

Generator and the state machine

Generator the best structure for implementing state machines. For example, clock function is a state machine.

var ticking = true;
var clock = function() {
  if (ticking)
    console.log('Tick!');
  else
    console.log('Tock!');
  ticking = !ticking;
}

The clock function in the code above has two states (Tick and Tock), which changes every time you run. This function, if implemented with Generator, is like this.

var clock = function* () {
  while (true) {
    console.log('Tick!');
    yield;
    console.log('Tock!');
    yield;
  }
};

Comparing the Generator implementation above with the ES5 implementation, you can see that there are fewer external variables ticking to hold the state, which makes it cleaner, safer (the state is not illegally tampered with), more in line with the idea of functional programming, and more elegant in writing. Generator can save state without external variables because it contains a state information about whether it is currently on hold.

Generator and co-program

协程 (coroutine) are ways 程序运行 which programs run and can be understood “协作的线程” or “协作的函数” C o-programs can be 单线程 single-threaded and 多线程 The former is a special sub-routine, while the latter is a special thread.

(1) The difference between the co-program and the sub-routine

The “子例程” method of "last-in, first-out" execution ends the execution of the parent function only when the called child function is fully executed. 堆栈式 U nlike concords, multiple threads (in the case of a single thread, that is, multiple functions) can execute in parallel, but only one thread (or function) is running, the other threads (or functions) are suspended, and execution rights can be exchanged between threads (or functions). T hat is, if one thread (or function) executes in half, execution can be suspended, and execution is handed over to another thread (or function) until execution is retracted later. This thread (or function) that can execute in parallel and exchange execution rights is called a co-program.

From an implementation point of view, in memory, sub-routines use only one stack, and the co-program is that there are multiple stacks at the same time, but only one stack is in a running state, that is, the co-program is at the expense of multi-occupancy memory, to achieve multi-task parallel.

(2) The difference between the co-program and the normal thread

It is not difficult to see that co-programs are suitable for multitasing environments. I n this sense, it is similar to a normal thread, has its own execution context, and can share global variables. T hey differ in that multiple threads can be running at the same time, but only one co-program can run and the other co-programs are paused. In addition, ordinary threads are preemptive, in the end which threads get resources first, must be determined by the running environment, but the co-program is cooperative, the executive power is allocated by the co-program itself.

Because JavaScript is a single-threaded language, only one call stack can be maintained. A fter the introduction of co-programs, each task can maintain its own call stack. T he biggest benefit of this is that when you throw an error, you can find the original call stack. Not as much as the callback function for asynchronous operations, the original call stack ends long ago if something goes wrong.

The Generator function is an ES6-to-co-program implementation, but it is an incomplete implementation. T he Generator function is called a "semi-coroutine", which means that only the caller of the Generator function can return the execution of the program to the Generator function. If the co-execution is full, any function can have the suspended co-execution continue.

If you think of the Generator function as a co-program, you can write multiple tasks that require collaboration as Generator functions that exchange control with yield expressions.

Generator and context

When JavaScript code runs, a global context 上下文环境 known as a running environment) is created that contains all the current variables and objects. Then, when a function (or block-level code) is executed, it produces a context in which the function runs and becomes the context of the current (active), creating a stack of contexts in the context.

This stack is “后进先出” the resulting context is first executed, exiting the stack, and then executing the context that completes its lower layer until all code execution is complete and the stack is emptied.

This is not the case with the Generator function, which executes the resulting context and temporarily exits the stack as soon as the yield command is encountered, but does not disappear, with all variables and objects frozen in the current state. When the next command is executed on it, the context rejoins the call stack, freezing variables and objects to resume execution.

function* gen() {
  yield 1;
  return 2;
}
let g = gen();
console.log(
  g.next().value,
  g.next().value,
);

In the above code, the first time g.next() is executed, the context of the Generator function gen is added to the stack, which starts running the code inside the gen. W hen yield 1 is encountered, the gen context exits the stack and the internal state freezes. The second time g.next() is executed, the gen context rejoins the stack, becomes the current context, and resumes execution.

11. Application

Generator pause 暂停函数 to return the value of any expression. This feature allows Generator to have a variety of scenarios.

(1) The simultaneous expression of asynchronous operations

Generator effect of the Generator function's pause on execution means that asynchronous operations can be written into yield expression and then executed later when the next method is called. T his is actually equivalent to not having to write a callback function, because subsequent operations of asynchronous operations can be placed under the yield expression and wait until the next method is called anyway. Therefore, an important practical significance of generator functions is to handle asynchronous operations and override callback functions.

function* loadUI() {
  showLoadingScreen();
  yield loadUIDataAsynchronously();
  hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()
// 卸载UI
loader.next()

In the above code, the first time a loadUI function is called, it is not executed and only one traverser is returned. T he next time you call the next method on the traverser, the Loading interface is displayed and the data is loaded asynchronously . W hen the data load is complete and the next method is used again, the Loading interface is hidden. As you can see, the benefit of this writing is that all the logic of the Loading interface is encapsulated in a function that is very clear in order.

Ajax is a typical asynchronous operation that deploys Ajax operations through the Generator function and can be expressed in a synchronized manner.

function* main() {
  var result = yield request("http://some.url");
  var resp = JSON.parse(result);
    console.log(resp.value);
}
function request(url) {
  makeAjaxCall(url, function(response){
    it.next(response);
  });
}
var it = main();
it.next();

The main function of the code above is to get the data through the Ajax operation. A s you can see, with the exception of one more yield, it is almost exactly the same as the synchronous operation. Note that the next method in the makeAjaxCall function must be added to the response argument, because the yield expression itself has no value and is always equal to undefined.

Here's another example of reading a text file line by line through the Generator function.

function* numbers() {
  let file = new FileReader("numbers.txt");
  try {
    while(!file.eof) {
      yield parseInt(file.readLine(), 10);
    }
  } finally {
    file.close();
  }
}

The above code opens the text file and uses the yield expression to manually read the file line by line.

(2) Control flow management

If a multi-step operation is time-consuming, using a callback function, it might be written as below.

step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // Do something with value4
      });
    });
  });
});

Use Promise to rewrite the code above.

Promise.resolve(step1)
  .then(step2)
  .then(step3)
  .then(step4)
  .then(function (value4) {
    // Do something with value4
  }, function (error) {
    // Handle any error from step1 through step4
  })
  .done();

The above code has changed the callback function to a straight-line execution, but adds a lot of Promise syntax. The Generator function can further improve the code run process.

function* longRunningTask(value1) {
  try {
    var value2 = yield step1(value1);
    var value3 = yield step2(value2);
    var value4 = yield step3(value3);
    var value5 = yield step4(value4);
    // Do something with value4
  } catch (e) {
    // Handle any error from step1 through step4
  }
}

Then, use a function to automate all steps in order.

scheduler(longRunningTask(initialValue));
function scheduler(task) {
  var taskObj = task.next(task.value);
  // 如果Generator函数未结束，就继续调用
  if (!taskObj.done) {
    task.value = taskObj.value
    scheduler(task);
  }
}

Note that the above approach is only suitable for synchronization operations, i.e. all tasks must be synchronized and not asynchronous. B ecause as soon as the code here gets a return value, it continues down without determining when the asynchronous operation will complete. If you want to control the asynchronous operation flow, see the chapter Asynchronous Operations later.

Below, take advantage of for... The of loop automatically executes the characteristics of the yield command in turn, providing a more general approach to control flow management.

let steps = [step1Func, step2Func, step3Func];
function* iterateSteps(steps){
  for (var i=0; i< steps.length; i++){
    var step = steps[i];
    yield step();
  }
}

In the above code, the array steps encapsulate multiple steps of a task, and the Generator function iterateSteps adds the yield command to those steps in turn.

After you break a task down into steps, you can also break up the project into multiple tasks that are performed in turn.

let jobs = [job1, job2, job3];
function* iterateJobs(jobs){
  for (var i=0; i< jobs.length; i++){
    var job = jobs[i];
    yield* iterateSteps(job.steps);
  }
}

In the above code, array jobs encapsulate multiple tasks for a project, and the Generator function iterateJobs adds yield commands to those tasks in turn.

Finally, you can use for... The of loop performs all the steps of all tasks in turn at once.

for (var step of iterateJobs(jobs)){
  console.log(step.id);
}

Again, the above practice can only be used in cases when all steps are synchronized operations and there can be no asynchronous steps. If you want to perform asynchronous steps in turn, you must use the methods described in the later chapter of Asynchronous Operations.

for... Of's nature is a while loop, so the above code essentially executes the following logic.

var it = iterateJobs(jobs);
var res = it.next();
while (!res.done){
  var result = res.value;
  // ...
  res = it.next();
}

(3) Deploy the Iterator interface

The Generator function allows you to deploy the Iterator object.

function* iterEntries(obj) {
  let keys = Object.keys(obj);
  for (let i=0; i < keys.length; i++) {
    let key = keys[i];
    yield [key, obj[key]];
  }
}
let myObj = { foo: 3, bar: 7 };
for (let [key, value] of iterEntries(myObj)) {
  console.log(key, value);
}
// foo 3
// bar 7

In the above code, myObj is a normal object, and through the IterEntries function, there is an Iterator interface. That is, you can deploy the next method on any object.

The following is an example of deploying an Iterator interface to an array, although the array natively has this interface.

function* makeSimpleGenerator(array){
  var nextIndex = 0;
  while(nextIndex < array.length){
    yield array[nextIndex++];
  }
}
var gen = makeSimpleGenerator(['yo', 'ya']);
gen.next().value // 'yo'
gen.next().value // 'ya'
gen.next().done  // true

(4) as a data structure

Generator can be 数据结构 数组结构 data structure, or rather as an array structure, because the Generator function can return a series of values, which means that it can provide an array-like interface to any expression.

function* doStuff() {
  yield fs.readFile.bind(null, 'hello.txt');
  yield fs.readFile.bind(null, 'world.txt');
  yield fs.readFile.bind(null, 'and-such.txt');
}

The above code returns three functions in turn, but because the Generator function is used, it is able to process the three returned functions as you would with arrays.

for (task of doStuff()) {
  // task是一个函数，可以像回调函数那样使用它
}

In fact, if expressed in ES5, it is perfectly possible to simulate this use of Generator with arrays.

function doStuff() {
  return [
    fs.readFile.bind(null, 'hello.txt'),
    fs.readFile.bind(null, 'world.txt'),
    fs.readFile.bind(null, 'and-such.txt')
  ];
}

The function above can be used with exactly the same for... o f loop processing! By comparison, it is not difficult to see that Generator makes data or operations with array-like interfaces.