手撕JavaScript中的yield

yield 是什么

简单理解 yield 可以看作是一次返回（不准确）

function *test(){
	// 直接返回 
  yield 1
}
console.log(test().next())

上面的代码输出

{value: 1, done: false}

再看下面的代码

function *test(){
  yield 1
  yield 2
  yield 3
}
let a = test()
// 执行第一次 next 返回了 {value: 1, done: false}
console.log(a.next())
// 执行第二次 next 返回了 {value: 2, done: false}
console.log(a.next())
// 执行第三次 next 返回了 {value: 3, done: false}
console.log(a.next())

从上面的代码执行结果来看，每一次 next 的调用都是从上一个 yield 处继续执行代码，直到遇到下一个 yield 或代码块执行完

那么是不是意味着 执行一次 next 后 test 内部的代码暂停在了对应的 yield 处。直到下一次 next 执行时再唤起。为了验证这个想法我们再写一段测试代码

function *test(){
  console.log("进入")
  yield "遇到了第一个 yield"
 	console.log("我被暂停啦。。")
  yield "遇到了第二个 yield"
  console.log("我又被暂停啦。。")
}
let a = test()
console.log(a.next())
console.log(a.next())

执行结果如下

说明我们的猜想是正确的。那么这样做到底有啥用呢？

yield 有什么用

既然 yield 有切分一个函数执行的能力，我们可以用 yield 来实现一个简单的函数外控制 loading 加载的代码

function *getList(){
   // 假设ajax函数是从后端获取数据的函数
	 yield ajax()
   // 切出一段执行时让给函数外的代码执行
   yield 
   // 其他业务代码
}
// 假设此处是拉起loading的代码
loading(true) 
// 执行此处代码后 可以执行ajax()并将执行内容返回  
let res = getList.next()
// 进行一些判断后可以让loading关闭
loading(false)
// 让迭代器中的内容继续执行  
getList.next()

参考资料

本文因水平有限写的十分粗浅，想进一步了解 yield 可以参考下面资料。

异步遍历器

python中yield的用法详解——最简单，最清晰的解释