Generator函数 笔记

❀ 总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

function* helloWorldGenerator() {
  yield 'hello'
  yield 'world'
  return 'ending'
}

const hw = helloWorldGenerator()
console.log(hw)

console.log(Object.prototype.toString.call(hw))

console.log(hw.next())

console.log(hw.next())

console.log(hw.next())

console.log(hw.next())

image.png

Codepen: https://codepen.io/MonguDykrai/pen/VVRPGv

let num = 0

function* helloWorldGenerator() {
  yield 'hello'
  num++
  yield 'world'
  num++
  num++
  num++
}

const hw = helloWorldGenerator()

console.log(hw.next())

console.log(num)

console.log(hw.next())

console.log(num)

console.log(hw.next())

console.log(num)

console.log(hw.next())

image.png

Codepen: https://codepen.io/MonguDykrai/pen/JezWbG

❀ Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。

function* f() {
  console.log('执行了')
}

var generator = f();

setTimeout(function () {
  generator.next() // 大约 2 秒后执行 console.log('执行了')
}, 2000)

上面代码中，函数 f 如果是普通函数，在为变量 generator 赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用 next 方法时，函数 f 才会执行。

Codepen: https://codepen.io/MonguDykrai/pen/VVRpQW

❀ 函数体内外的数据交换

向外输出

function* generator(x) {
  let y = yield x + 2
  return y
}

const gen = generator(1)
console.log(gen)

console.log(gen.next())
console.log(gen)

console.log(gen.next())
console.log(gen)

image.png

https://codepen.io/MonguDykrai/pen/OaeGrp

向内输入

function* generator(x) {
  let y = yield x + 2
  return y
}

const gen = generator(1)
console.log(gen)

console.log(gen.next())
console.log(gen)

console.log(gen.next(4))
console.log(gen)

console.log(gen.next())

image.png

https://codepen.io/MonguDykrai/pen/gQNNxq

异步应用

function ajax() {
  console.log('ajax executed') // 第一个被输出
  fetch('https://jsonplaceholder.typicode.com/todos')
  .then(res => {
    return res.json()
  })
  .then(data => {
    it.next(data) // ② 恢复 generator 函数的执行
  })
}

function* gen() {
  const data = yield ajax()
  console.log(data) // 第二个被输出
}

const it = gen()
it.next() // ① 执行 yield 后的表达式，完毕后停止执行

https://codepen.io/MonguDykrai/pen/LqQoOL
https://codepen.io/MonguDykrai/pen/wNybEO

参考资料：
http://es6.ruanyifeng.com/#docs/generator#%E7%AE%80%E4%BB%8B