yield关键字理解

yield关键字理解

什么是yield

The yield keyword is used to pause and resume a generator function.
// yield这个关键字是用来暂停和恢复一个遍历器函数（的运行）的。

类似return，但是有不同：

return

结束函数并且将结果进行返回，return 后面的代码将不再执行
yield

有点类似断点，过程中可将值进行返回并且暂停函数，通过调用next继续进行函数，

yield必须要写在遍历器函数(Generator)中,否则会报错Uncaught ReferenceError: yield is not defined

next函数

next是让Generator函数(继续)执行的方法，当遇到yield的时候会暂停并且拿到响应的返回值，返回值结构为{value: xxx, done: false},value为yield 后面表达式的结果，如果为空则value为undefined，done为true的时候代表函数执行完毕，当函数遇到return，value的结果为return的结果，done为true，next可以无限执行。

如何使用

demo1

var a = 0;
function *foo() {
  a += 1;
  yield '';
  return;
}
var f = foo();
alert(a);

题解

alert结果为0，因为f没有触发next方法，所以不被执行

demo2

var foo = function *() { 
  var x = 1;
  var y =  yield (x + 1);
  var z = yield (x + y);
  return z;
}() 
var a = foo.next(); 
var b = foo.next(3);
var c = foo.next(4);
// a  b  c 为何值

答案

a = 2 b = 4 c = 4

题解

var a = foo.next(); 时候执行的是yield (x + 1)；这个时候返回值为1+1,然后暂停

var b = foo.next(3);开始执行，由于foo.next(3)进行了赋值，所以var y=3；因为next传递的参数是会强制给上一个yield的结果 所以 b 的结果就为 3+1

var c = foo.next(4);开始执行，遇到了return 返回z，z的值为yield(x+y) 的结果，但是因为foo.next(4)强制修改了结果，所以z=4

总结

1. yield 必须要卸载Generator函数中，否则会报错
2. 当遇到return 后 next 返回 return的值，并且将done的值标记为true，后续next的返回值都为{value:undefined,done:true}
3. 遍历器函数不会直接执行，需要调用next方法
4. next函数支持传参，参数会赋值给上一个yield的结果
5. 第一次执行next不需要传参，（传递了也不知道给那个yield用）

参考网址

代码写了那么多，你搞明白yield是个啥没？

深入理解js中的yield