迭代器、生成器函数及ES6中生成器函数的异步操作方法

最近写了关于RN的，涉及redux-saga。saga的实现原理是ES6中的Generator函数，而Generator函数与迭代器密切相关。因此，本博客首先总结了迭代器相关的东西，然后介绍了生成器相关的内容，最后介绍了使用生成器的异步编程。本博客中涉及的示例是用TypeScript语言编写的。当然，涉及的特性是基于ES6规范的。使用TS语言不会影响ES6相关特性的讲解和总结。下一步博客准备系统将整理佐贺相关内容。

首先，迭代器

当我再次谈到迭代器模式时，我使用Swift语言定制迭代器，TS中也有迭代器。这里的迭代器类似于前面介绍的迭代器。首先，让我们定制一个迭代器，然后看看迭代器在ES6中的使用。

1、自定义迭代器

迭代器函数定义如下，描述如下：

这个函数接收一个数组类型参数，我们可以传入需要创建迭代器的数组作为参数。函数内部定义了一个nextIndex参数来记录迭代器的位置。该函数返回一个迭代器对象，该对象包含一个属性，该属性的键是下一个，值是匿名的。这个匿名方法的返回值是每个迭代器返回的结果对象，它由两个属性组成，value表示这个迭代器的值，done表示迭代器遍历是否完成。遍历到底，最后返回{value:undefine，done3360true}的值，表示迭代器遍历结束，值未定义，done为真。

定制迭代器后，我们可以测试上面的代码。

首先，创建一个数组，然后将该数组传递给makeIterator函数。

makeIterator函数使用下一个方法返回迭代器对象。

我们将这个迭代器命名为对象迭代器，这样我们就可以通过迭代器的下一个方法依次获得数组中的值。我们通过while循环连续调用迭代器中的下一个方法，直到下一个方法返回的对象中的done值为true，这意味着遍历结束。遍历结束后，我们再次调用next()方法，得到一个{value: undefined，done3360 true}的对象，表示遍历结束，得到的值未定义。

2、2。ES6中的迭代器

类似于Swift语言的特点，在ES6规范中，我们可以通过一些对象直接获取这个对象对应的迭代器，如下图所示：

下面示例中使用的数组与上面使用的列表相同。首先，我们通过list[Symbol.iterator]()，得到列表对应的迭代器。

(符号也是一种数据类型，用于表示唯一的对象。)这个迭代器的用法和输出结果与上面提到的自定义迭代器完全一致，输出结果也与前面的结果一致。

3.使用for-of遍历迭代器

使用while循环遍历以上述方式创建的迭代器。除了while循环，我们还可以遍历for-of。

这里的for-of遍历类似于Swift语言中的for-in循环，可以依次自动移除迭代器中的值。

下面是通过循环for-of创建的迭代器。

从下面的例子中，我们可以很容易地看到直接输出是迭代器返回的对象的值。

4.向类中添加迭代器

我们可以给自己的类添加相关的方法，让自己的类支持迭代器。下面创建了一个范围迭代器类，它可以定义一个范围。构造函数可以接受两个值，一个是范围的开始位置，另一个是范围的结束点。下面，我们为这个范围类添加了一个自定义迭代器，描述如下：

这个类中增加了一个名为next的箭头函数，类似于之前用户定义的next方法，主要用于获取下一个值并返回。

然后实现一个[符号。函数获取迭代器对象。最后，我们可以看到定义的范围对象可以通过使用for-of类迭代器来遍历。

5.调用迭代器的场景

迭代器有相当多的使用场景，比如解构赋值、扩展运算符、Generator函数和yield*，下面简单列举一下。

(1)数组或集合的解构和赋值

在下面的代码片段中，首先创建了一个名为mySet的集合对象。然后通过循环将一些值添加到集合中。然后，通过解构和赋值来提取mySet中的第一个值和第二个值。此时，结构赋值将调用集合的迭代器接口，取出第一个值和第二个值，分别赋给第一个和第二个。

在第二个红色框中，扩展运算符用于结构赋值，这将使其他人获得第一项的剩余值。

(2)扩展运算符.

让我们看另一个扩展运算符的例子。

首先定义一个字符串，然后扩展运算符将字符串的每个字符拆分成一个数组。输出结果如下所示。扩展运算符也可以用于对象，如第二个示例所示。

(3)用于生成器函数的yield *

生成器功能将在后面详细介绍。一个生成器函数返回一个迭代器，我们可以调用迭代器的下一个方法来执行每个收益。在Generator函数中，您可以使用一个可以在yield *之后遍历的结构，这样我们就可以使用next从外部访问这个遍历结构的每个值，如下所示：

二、生成器功能和异步编程

理解了迭代器之后，让我们看看生成器函数。如果你已经开发了RN并使用了redux-saga，你应该熟悉Generator函数。Generator函数是ES6提供的异步编程的解决方案。我们首先看一下Generator函数的基本用法，然后看一下如何将Generator函数用于异步编程。

1.生成器函数的定义和使用

生成器函数定义如下。生成器函数的定义类似于普通函数的定义，只是函数关键字后面有一个*符号。然后，每个yield语句在函数体内部使用，以指示每个步骤的操作。定义生成器函数后，接着使用。首先，调用生成器函数来获取迭代器。每次执行迭代器的下一个方法时，都会执行一次yield语句。输出与上面的迭代器没有什么不同。

2.下一个参数

当调用生成器函数返回的迭代器时，可以将参数传递给下一个方法。下一个方法可以取一个参数，作为上一个yield语句的返回值。以下是将参数传递给下一个的示例：

下面定义了一个生成器函数，用于输出自增加值。下次每次打电话，都会得到一个自我增值。当调用rg.next(true)时，这个true将被赋值为reset，因为这个reset被认为是上一次收益率的返回值，并且在执行上一次收益率之后，索引将被设置为-1。然后，执行对应于rg.next(真)的收益率，并且指数从-1增加然后变成0，因此对应于rg.next(真)的收益率的值是0。

下面是另一个例子：

下面定义了一个名为testNextValue的生成器函数，它本身接收一个参数。调用生成器函数时，会传入一个参数，该参数不是Next的参数，而是生成器函数本身的参数。

调用Generator函数时，不会立即执行函数体，函数中的yield语句体只会在调用下一个函数时执行。

对Next的第一次调用传入了一个值5，这意味着x=5。

第一次执行next将调用第一个yield语句体test1.next(2)=x 1=5 1=6，所以第一次调用next的结果值为

6。第二次调用Next，传入的Next参数为3。

这个3作为最后一个收益率语句体的返回值，收益率(x 1)的返回值为3。y的值是2 * 3=6。yield中的值是y/3=2，所以第二次执行next得到的值是2。第三次调用next传入的参数是4，作为最后一个yield语句体返回的参数，所以z=4。分析完x=5，y=6，x y z=15，Next的第三次执行是15。再次调用Next，因为语句体已经完成，所以得到的是未定义的。

第三，使用生成器函数进行异步编程

接下来，实现一个简单的例子，并通过使用Generator函数结合Promise回调来模拟异步编程。

首先定义一个getPromise函数，它接收两个参数，一个参数代表网络请求的参数，另一个参数代表请求时间。该函数返回一个Promise对象。在Promise对象中，我们使用settimeout来模拟请求的延迟，并根据传入的timeout来确定延迟时间。延迟时间到达后，我们将执行resolve方法来回调相关值。

然后定义一个生成器函数，其中每个函数都由yield调用。下面的Generator函数比较简单，这里就不赘述了。

然后我们通过for -of执行生成器函数的下一个方法，然后执行每个getPromise方法。

下面是具体的执行结果。从执行结果不难看出，每次得到的收益值都是一个Promise对象，我们可以在Promise对象的then方法中得到相关的结果值。从输出顺序可以看出，时间短的结果会先输出。

摘要

以上是边肖介绍的ES6中的迭代器、生成器函数以及生成器函数的异步操作。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！