关于generator:理解-generator

1. 生成器中while设置为true

redux-saga 文档中提到take实现takeEvery在while中应用了yield监听将来的 action

循环有限次

function* watchRequests() {  console.info("xx");  let preVal = 0;  while (true) {    console.info("yy");    const ret = yield preVal + 2;    // if (ret === 3) {    //   break;    // }    preVal = ret;    console.info("output:", ret);  }}const it = watchRequests();for (const item of it) {  console.info(item);}

这么调用，生成器中的while无终止条件，会导致有限循环。

循环无限次数

function* watchRequests() {  console.info("xx");  let preVal = 0;//记录上次内部传进来的值  while (true) {    console.info("yy");    const ret = yield preVal + 2;    // if (ret === 3) {    //   break;    // }    preVal = ret;    console.info("output:", ret);  }}const it = watchRequests();// for (const item of it) {//   console.info(item);// }for (let i = 0; i < 5; i++) {  const r = it.next(i);  console.info("r:", r);}

输入：

xxyyr: { value: 2, done: false }output: 1yyr: { value: 3, done: false }output: 2yyr: { value: 4, done: false }output: 3yyr: { value: 5, done: false }output: 4yyr: { value: 6, done: false }

每一步的执行状况为：

• 执行it.next(0)，输入

xx
yy
r: { value: 2, done: false }
解释：执行第一行代码输入xx,并进入循环体，执行并返回yield前面的计算结果，内部输入0+2，遇到yield关键字，暂停

• 执行it.next(1)，输入

output: 1
yy
r: { value: 3, done: false }
解释：next的参数1输出到生成器的外部，在上次yield的中央继续执行，将1传递给了yield后面的ret,preVal被赋值为1，output打印为1，因为没遇到yield，持续在循环体中执行代码，执行yield前面的代码preVal+2,即1+2，返回执行后果到内部，内部r打印为3

• 执行it.next(2)，输入

output: 2
yy
r: { value: 4, done: false }

• 执行it.next(3)，输入

output: 3
yy
r: { value: 5, done: false }

• 执行it.next(4)，输入

output: 4
yy
r: { value: 6, done: false }

生成器实现了函数内外部的数据通信。

生成器中有终止条件

• 终止条件为break

function* watchRequests() {  console.info("xx");  let preVal = 0;  while (true) {    console.info("yy");    const ret = yield preVal + 2;    if (ret === 3) {      break;    }    preVal = ret;    console.info("output:", ret);  }}const it = watchRequests();for (let i = 0; i < 5; i++) {  const r = it.next(i);  console.info("r:", r);}

输入：
xx
yy
r: { value: 2, done: false }
output: 1
yy
r: { value: 3, done: false }
output: 2
yy
r: { value: 4, done: false }
r: { value: undefined, done: true }
r: { value: undefined, done: true }
当i为3，break跳出循环，生成器终止。r.value为undefined

• 终止条件为break且while有yield

function* watchRequests() {  console.info("xx");  let preVal = 0;  while (true) {    console.info("yy");    const ret = yield preVal + 2;    if (ret === 3) {      break;      // return "final";    }    preVal = ret;    console.info("output:", ret);  }  return "biu";}const it = watchRequests();for (let i = 0; i < 5; i++) {  const r = it.next(i);  console.info("r:", r);}

输入：
xx
yy
r: { value: 2, done: false }
output: 1
yy
r: { value: 3, done: false }
output: 2
yy
r: { value: 4, done: false }
r: { value: 'biu', done: true } // i为3 跳出while，执行return "biu";这个时候done为true
r: { value: undefined, done: true }

i为3 跳出while，执行return "biu";这个时候done为true，下面while外没有return 执行break完，就跳出循环，且done为true，按理说不应该执行完returndone才为true吗？比方：

function* gen(arg) {  yield 1;  yield 2;}const one = gen("io");console.info(one.next());console.info(one.next());console.info(one.next());console.info(one.next());

输入：
{ value: 1, done: false }
{ value: 2, done: false }
{ value: undefined, done: true }
{ value: undefined, done: true }
是在执行第三个next后，done才为true的，跟下面while循环中的break矛盾。

• 终止条件为return

function* watchRequests() {  console.info("xx");  let preVal = 0;  while (true) {    console.info("yy");    const ret = yield preVal + 2;    if (ret === 3) {      // break;      return "final";    }    preVal = ret;    console.info("output:", ret);  }}const it = watchRequests();for (let i = 0; i < 5; i++) {  const r = it.next(i);  console.info("r:", r);}

输入：
xx
yy
r: { value: 2, done: false }
output: 1
yy
r: { value: 3, done: false }
output: 2
yy
r: { value: 4, done: false }
r: { value: 'final', done: true }
r: { value: undefined, done: true }

当i为3，return “final”终止循环，生成器也执行结束，前面没有yield也没有return了，done为true

第一次运行next执行的是第一个yield下面以及右侧的代码，第二次运行next，执行的是第一个yield左侧的代码到第二个yield右侧的代码。以此类推。

终止条件为return且while循环中有两个yield

function* watchRequests() {  console.info("xx");  let preVal = 0;  while (true) {    console.info("yy");    const ret = yield preVal + 2;    yield "geek";    if (ret === 3) {      break;      // return "final";    }    preVal = ret;    console.info("output:", ret);  }  return "biu";}const it = watchRequests();for (let i = 0; i < 6; i++) {  const r = it.next(i);  console.info("r:", r);}

输入：
xx
yy
r: { value: 2, done: false }
r: { value: 'geek', done: false }
output: 1
yy
r: { value: 3, done: false }
r: { value: 'geek', done: false }
r: { value: 'biu', done: true }
r: { value: undefined, done: true }
原理是一样的，失去了预期的后果。

参考：
深入浅出 ES6（三）：生成器 Generators