JavaScript的ES6语法9generator函数之yield关键字

Posted 2021-05-17 光仔December

上一篇我们学习了generator的基本概念 ，知道它可以将方法暂停挂起，需要继续执行的时候再继续执行，
在暂停方法的时候，我们使用到了一个关键字“yield”，本篇我们就来重点讲解一下这个关键字。

“yield”的主要作用就是放弃当前的方法执行进程，等待新的执行指令后，再继续执行后续的逻辑代码。yield除了发挥刚刚的作用，实际上它还可以传参，也可以返回数据。

一、yield传参

例如下面的generator方法：

<script type="text/javascript">
   function *show(){
      alert('a');
      let a=yield;
      alert('b');
      alert(a);
   }
   let genObj = show();
   genObj.next(111);
   genObj.next(222);
</script>

我们可以在执行的generator对象的next方法中传入参数，这个参数就会传递至yield。yield接收参数也很简单，直接获取返回值就可以。

上面的函数执行后，最后一个alert得到的结果是“222”:

为什么呢？我们来剖析一下程序的整个执行过程。下面蓝色区域的内容，是在实行第一次next方法的时候实行的，红色区域是在执行第二次next方法的时候执行的：

所以a的数据接收到的是第二个next传入的参数“222”。所以这里我们得出一个结论，在进行next传参的时候，第一个next方法的参数传入是无用的（说白了，第一个next是用来启动生成器的）。
总结一下，yield传参就像是做菜一样，各个yield分割开的方法体，就是一个做菜过程中的一步，前一个做菜方法的结果，是下一个做菜方法的输入（图片由kaikeba.com提供，主讲老师石川（Blue））：

二、yield返回

我们编写一个实例，看看yield的返回是什么样的：

<script type="text/javascript">
   function *show(){
      alert('a');
      yield 12;
      alert('b');
      return 34;
   }
   let genObj = show();
   let res1 = genObj.next();  
   console.log(res1);  //{value:12,done:false}
   let res2 = genObj.next();
   console.log(res2);  //{value:34,done:false}
</script>

该函数执行的结果，两个console分别显示的结果如下：

实际上这里的yield充当了方法中断时的return，允许方法在中断暂停的时候，也可以返回一个结果数据，方便我们在执行下一个方法的时候，需要用到上个方法的结果去处理一些东西。

三、yield到底是什么

讲了那么多，可能很多童鞋还不彻底清楚yield到底是个什么东西，这里我们使用上面的洗菜的实例，为大家形象的类比一下：

<script type="text/javascript">
   function *炒菜(菜市场买回来的菜){
      洗菜->洗好的菜;
      let 干净的菜=yield 洗好的菜;
      干净的菜->切->丝;
      let 切好的菜=yield 丝;
      切好的菜->炒->熟的菜;
      return 熟的菜;
   }
   let genObj = show(菜市场买回来的菜);
   let res1 = genObj.next();  
   /*res1.value是洗好的菜，方法外可以做一些其他的操作，例如让老婆看看干不干净等... */   
   let res2 = genObj.next(res1.value);
   /*res2.value是切好的菜，方法外可以做一些其他的操作，例如去拿儿子刚买过来的盐去简单腌制一下丝...*/
   let res3 = genObj.next(res2.value);
   //res3.value是最终的“熟的菜”
</script>

这里我们可以理解yield是一个暂停动作，这个暂停动作可以接受上一步的结果作为参数，也可以额将这一阶段执行的结果返回给外部。上面整个做菜过程，是可以临时掺杂其他的事情的，这就是yield的最大作用。

了解了yield之后，更能理解generator的存在意义。实际上它和promise一样，是用来解决函数异步调用的。我们下一篇来编写generator实例，来实际应用它。

参考：深入解读ES6系列视频教程（kaikeba.com提供，主讲老师石川（Blue））
转载请注明出处：https://blog.csdn.net/acmman/article/details/116419881