深入理解js中的yield

谁借莪１个温暖的怀抱￠ 2021-06-26 16:06 502阅读 0赞

## `yield`是什么 ##

*  `yield`是ES6的新关键字，使生成器函数执行暂停，`yield`关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的`return`关键字。
 *  yield关键字实际返回一个`IteratorResult`（迭代器）对象，它有两个属性，`value`和`done`，分别代表返回值和是否完成。
 *  `yield`无法单独工作，需要配合`generator(生成器)`的其他函数，如`next`，懒汉式操作，展现强大的主动控制特性。

## `yield`应用的简单例子 ##

![demo1][]

1.  如果你看到某个函数中有`yield`，说明这个函数已经是个生成器了
2.  `yield`可以用来加强控制，懒汉式加载
3.  调用函数指针和调用生成器是两码事，注意上面的运行结果，`countAppleSales`和`myArr`。
4.  需要`next()`函数配合使用，每次调用返回两个值：分别是`value`和`done`，代表迭代结果和是否完成
5.  函数`next()`是个迭代器对象，传参可以缺省，默认调用函数。

## 错误的调用 ##

![demo2][]上述错误的调用中，会的到如下结果

{ value: 7, done: false }
    { value: undefined, done: true }

因为在`while`判断中的`next`也会进行消耗，导致输出结果与预期不符，得到的只是符合条件的偶数项

## 一些说明 ##

1.  `yield`并不能直接生产值，而是产生一个等待输出的函数
2.  除`IE`外，其他所有浏览器均可兼容（包括`win10` 的`Edge`）
3.  某个函数包含了`yield`，意味着这个函数已经是一个`Generator`
4.  如果`yield`在其他表达式中，需要用`()`单独括起来
5.  `yield`表达式本身没有返回值，或者说总是返回`undefined`(由`next`返回)
6.  `next()`可无限调用，但既定循环完成之后总是返回`undeinded`

## `next()`函数及参数 ##

1.  在js中，虽然借鉴了`python`的函数，但是也进行了自己的改造，由于没有`send()`函数，所以无法直接传递`yield`的值。
2.  `next()`可以带一个参数，该参数会被认为是上一个`yield`整体的返回值，稍后将在代码中展示。
3.  在某种程度上，`next()`可以直接当做`send()`使用

**它的意义在于，可以在不同阶段从外部直接向内部注入不同的值来调整函数的行为(这一点是其他循环很难做到的，或要付出较大的代价才可以做到)**

## `yield`参数的对比 ##

![在这里插入图片描述][20190530223446358.png]

![python][]

1.  对`js`中`generator`函数进行改造，对比右边的`python`中的`yield`，它们原理一样，只是调用方式不同
2.  调用`next()`，会产生许多`i`的值, 但是不会影响`reset`，因为`yield`直接将值`return`出来了。
3.  当传值`true`后，`yield`及他的参数整体变为`true`赋值给`reset`，这是`reset`会被执行，从而满足循环内的判断条件
4.  这里的使用 `next(参数)` 已经达到了`send(参数)`的效果
5.  这并不会平白增加循环的时间复杂度，因为不传参的时候，并不会占用更多的内存

## 更深层次的理解`yield` ##

如果刚才没有让你有一个清晰的认识，那么这个例子一定会让你彻底明白的

![传参][20190530223747331.png]

## 分析 ##

**`next()` 传参是对`yield`整体的传参，否则`yield`类似于`return`**

### A组 ###

`x`恒为5，所以第一次调用传空没问题，可得到对应的第一个`yield`返回值:`yield (x + 1)`  
第二次调用，无参数传入，所以`y`为`NaN(2* undefined)`，自然得不到`z`  
第三次调用同上分析

### B组 ###

`x`恒为`5`，所以第一次调用传空没问题，可得到对应的第一个`yield`返回值:`yield (x + 1)`  
第二次调用，传入`12`，所以`y`为24(yield (x + 1)=入参)，得到第二个`yield`: `yield (y / 3)=8`  
第三次调用同上分析,得到最后的z值并`return=42`

## 目前项目中的可用性 ##

在前端项目中，用的机会很少，完全可以忽略他的存在，但是在后台项目中，就显得比较重要了，因为其优越的可控性，可是极大的提升线程的效率。  
目前只是根据官网，`ES6`规范，大站等总结出来的，但是很遗憾，目前我们的项目中由于`node`项目较简单，并不需要进行实际改造。  
如果需要实例的话，可参考`github`上的一些`python`后端项目，调用方式稍有不同，由于`js`参考的`python`语言，他们又同为动态语言，所以原理都是相同的，用处也一样。

[demo1]: /images/20210626/509e0a2e0d454835a115f2dc8a0210af.png
[demo2]: /images/20210626/3dec876abbc64be6b950720f10235b61.png
[20190530223446358.png]: /images/20210626/602d592207c644058d8a50201faf0809.png
[python]: /images/20210626/c876278c7ad24361864cc24b47d6e931.png
[20190530223747331.png]: /images/20210626/ae4113a96cd648958affc65fc6e94ca6.png