乐趣区

关于generator:理解-generator

jiezi
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);
}

输入：

xx
yy
r: {value: 2, done: false}
output: 1
yy
r: {value: 3, done: false}
output: 2
yy
r: {value: 4, done: false}
output: 3
yy
r: {value: 5, done: false}
output: 4
yy
r: {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

退出移动版