ES6 从入门到精通 # 15：生成器 Generator 的用法

说明

ES6 从入门到精通系列（全23讲）学习笔记。

generator 函数

可以通过 yield 关键字将函数挂起，为了改变执行流提供了可能，同时为了做异步编程提供了方案

跟普通函数的区别：

1. function 后面，函数名之前有个​​*​​ 号
2. 只能在函数内部使用 yield 表达式，让函数挂起

function * func() {
  yield 3;
  yield 1;
  yield 2;
}
// 返回一个遍历器，可以调用 next()
let kaimo = func();
console.log(kaimo)
console.log(kaimo.next())
console.log(kaimo.next())
console.log(kaimo.next())
console.log(kaimo.next())

总结：generator 函数是分段执行的，yield 语句是暂停执行，而 ​​next()​​ 恢复执行

function * func() {
  console.log("start")
  let x = yield 3;
  console.log("x-->", x)
  let y = yield 1;
  console.log("y-->", y)
  let z = yield 2;
  console.log("z-->", z)
  return x + y + z;
}
let kaimo = func();
console.log(kaimo.next(10))
console.log(kaimo.next(20))
console.log(kaimo.next(30))
console.log(kaimo.next(40))
console.log(kaimo.next(50))

这里的 ​​let x = yield 2;​​​ 表达式里的 x 不是 ​​yield 2​​​ 返回值，它是 ​​next()​​ 调用恢复当前 yield 执行传入的实参。所以这里的 x 是 20。

使用场景

为不具备 iterator 接口的对象提供遍历操作

function * objectEntries(obj) {
  // 获取对象的所有keys保存到数组 [name, value]
  const propKeys = Object.keys(obj);
  for(const propkey of propKeys) {
    yield [propkey, obj[propkey]]
  }
}
const kaimo = {
  name: "凯小默",
  value: "kaimo313"
}
kaimo[Symbol.iterator] =  objectEntries(kaimo);
console.log(kaimo);

遍历：

for(let [key, value] of kaimo[Symbol.iterator]) {
  console.log(key, value)
}