JS中迭代器和生成器详细介绍汇总

川长思鸟来 2023-10-02 20:04 15阅读 0赞

#### 文章目录 ####

*   *  1.迭代器
     *   *  1.1 认识迭代器
         *  1.2 理解迭代器
     *  2.可迭代对象
     *   *  2.1 认识可迭代对象
         *  2.2 可迭代对象特点
         *  2.3 原生迭代器对象
         *  2.4 可迭代对象场景
         *  2.5 自定义类的迭代
         *  2.6 迭代器的中断
     *  3.生成器介绍
     *   *  3.1 什么是生成器
         *  3.2 生成器函数执行
         *  3.3 生成器传递参数
         *  3.4 生成器提前结束
         *  3.5 生成器抛出异常
     *  4.生成器应用
     *   *  4.1 生成器替代迭代器
         *  4.2 生成器实现自定义类迭代
     *  5.生成器异步处理
     *   *  5.1 普通处理方案
         *  5.2 生成器方案

### 1.迭代器 ###

#### 1.1 认识迭代器 ####

**迭代器（iterator），是使用户在容器对象（container，例如链表或数组）上可以遍历访问的对象，使用该接口无需关心容器对象的内部实现细节。**

*  其行为**像数据库中的光标**，迭代器最早出现在1974年设计的CLU编程语言中；
 *  **在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如Java、Python等；**

**从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。**

**在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议（iterator protocol）**:

*  迭代器协议定义了**产生一系列值（无论是有限还是无限个）的标准方式**；
 *  在JavaScript中**这个标准就是一个特定的next方法**；

**next方法要求：next方法是一个无参数或者有一个参数的函数，返回结果应当拥有以下两个属性的对象：**

**1.done（boolean) : done返回一个布尔值: 可能是false, 可能是true**

*  如果迭代器**可以产生序列中的下一个值**，则为 **false**。（这等价于没有指定 done 这个属性。）
 *  如果迭代器**已将序列迭代完毕**，则为 **true**。这种情况下，value 是可选的，如果它依然存在，即这个值为迭代结束之后默认返回值。

**2. value：value的返回值: 可能是一个具体的值, 可能是undefined**

*  迭代器返回的任何 JavaScript 值。done 为 true 时可省略。

#### 1.2 理解迭代器 ####

**上面的概念可能会有些抽象 , 下面我们来看看代码帮助我们理解next方法需要满足的要求** :

1.  创建一个满足要求的迭代器

const arr = [10, 20, 30]
    
    // 给数组arr创建一个迭代器
    // 1.迭代器是一个对象 首先我们创建一个对象
    const arrIterator = {
        
      // 2.迭代器中有一个next方法, 这个函数要求无参数或者仅有一个参数, 在对象中添加next方法
      next: function() {
        
        // 3.next方法需要返回一个对象, 且对象中需要包含done和value两个属性
        return {
        done: false, value: 10}
      }
    }

1.  但是这个迭代器对象还并不能帮助我们对数组进行迭代, 我们需要实现如下功能:

// 第一次调用迭代器, 由于没有完成所有的迭代, done应该为false, value应该为10
    console.log(arrIterator.next())
    // 第二次调用迭代器, 由于没有完成所有的迭代, done应该为false, value应该为20
    console.log(arrIterator.next())
    // 第三次调用迭代器, 由于没有完成所有的迭代, done应该为false, value应该为30
    console.log(arrIterator.next())
    // 第四次调用迭代器, 由于已经完成所有的迭代, done应该为true, value应该为undefined
    console.log(arrIterator.next())

1.  添加一个if添加语句, 我们就可以实现如上功能, 但是这个迭代器是arr这个数组独有的迭代器, 不具备通用性

const arr = [10, 20, 30]
    
    // 给数组arr创建一个迭代器
    let index = 0
    // 1.迭代器是一个对象 首先我们创建一个对象
    const arrIterator = {
        
      // 2.迭代器中有一个next方法, 这个函数要求无参数或者仅有一个参数, 在对象中添加next方法
      next: function() {
        
        // 3.next方法需要返回一个对象, 且对象中需要包含done和value两个属性
        if (index < arr.length) {
        
          return {
         done: false, value: arr[index++] }
        } else {
        
          return {
         done:true, value: undefined }
        }
      }
    }
    
    console.log(arrIterator.next()) // {done: false, value: 10}
    console.log(arrIterator.next()) // {done: false, value: 20}
    console.log(arrIterator.next()) // {done: false, value: 30}
    console.log(arrIterator.next()) // {done: true, value: undefined}

1.  我们封装一个函数, 让上面我们实现的迭代器具有通用性

// 例如有两个数组
    const nums = [10, 20, 30, 40]
    const names = ["aaa", "bbb", "ccc", "ddd"]
    
    // 封装一个用于创建迭代器的函数
    function createArrayIterator(arr) {
        
      let index = 0
      return {
        
        next: function() {
        
          if (index < arr.length) {
        
            return {
         done: false, value: arr[index++] }
          } else {
        
            // value不写, 默认就是undefined
            return {
         done: true }
          }
        }
      }
    }
    
    // 调用函数创建nums构造器
    const numsIterator = createArrayIterator(nums)
    console.log(numsIterator.next()) // {done: false, value: 10}
    console.log(numsIterator.next()) // {done: false, value: 20}
    console.log(numsIterator.next()) // {done: false, value: 30}
    console.log(numsIterator.next()) // {done: false, value: 40}
    console.log(numsIterator.next()) // {done: true}
    
    // 调用函数创建names构造器
    const namesIterator = createArrayIterator(names)
    console.log(namesIterator.next()) // {done: false, value: 'aaa'}
    console.log(namesIterator.next()) // {done: false, value: 'bbb'}
    console.log(namesIterator.next()) // {done: false, value: 'ccc'}
    console.log(namesIterator.next()) // {done: false, value: 'ddd'}
    console.log(namesIterator.next()) // {done: true}

### 2.可迭代对象 ###

#### 2.1 认识可迭代对象 ####

**但是上面的代码整体来说看起来是有点奇怪的：**

*  我们获取一个数组的时候，需要**自己创建一个index变量**，**再创建一个所谓的迭代器对象**；

事实上我们**可以对上面的代码进行进一步的封装，让其变成一个可迭代对象**；

*  我们再来看一下类似于刚刚的代码

const info = {
        
      friends: ["aaa", "bbb", "ccc"]
    }
    
    let index = 0
    // 创建一个info的迭代器
    const infoIterator = {
        
      next: function() {
        
        if (index < info.friends.length) {
        
          return {
         done: false, value: info.friends[index++] }
        } else {
        
          return {
         done: true }
        }
      }
    }
    
    console.log(infoIterator.next()) // {done: false, value: 'aaa'}
    console.log(infoIterator.next()) // {done: false, value: 'bbb'}
    console.log(infoIterator.next()) // {done: false, value: 'ccc'}
    console.log(infoIterator.next()) // {done: true}

*  我们发现, **想要迭代的对象和我们的迭代器是分开的, 那么有没有办法就将要迭代的对象和迭代器合并起来呢**？(往下面看)

**什么又是可迭代对象呢？**

*  **可迭代对象和迭代器是两个不同的概念, 其实我们将上面的代码中, 迭代的目标对象和迭代器合并起来就一个可迭代对象**；
 *  当**一个对象实现了iterable protocol协议**时，它**就是一个可迭代对象**；
 *  **可迭代对象的要求一 : 是必须实现 @@iterator (这是规范的名字) 方法**，在代码中我们**使用 \[Symbol.iterator\] (这是实际用的名字)访问该属性**；
 *  **可迭代对象的要求二 : 这个\[Symbol.iterator\] 方法需要返回一个迭代器**
 *  那么我们根据这两个要求, 试着将上面代码中的info对象变成一个可迭代对象

const info = {
        
      friends: ["aaa", "bbb", "ccc"],
      
      // 1.必须实现一个特定的方法[Symbol.iterator]   (名字是固定的)
      [Symbol.iterator] () {
        
        // 将我们创建的info对象的迭代器放过来
        let index = 0
        const infoIterator = {
        
          next: function() {
        
            if (index < info.friends.length) {
        
              return {
         done: false, value: info.friends[index++] }
            } else {
        
              return {
         done: true }
            }
          }
        }
        // 2.这个方法需要返回一个迭代器(这个迭代器用于迭代当前对象)
        return infoIterator
      }
      
    }

*  **为了进一步优化, 我们想在next方法中使用this, 但是next方法中的this不一定指向info, 我们需要让this指向info**

const info = {
        
      friends: ["aaa", "bbb", "ccc"],
      [Symbol.iterator] () {
        
        let index = 0
        const infoIterator = {
        
          // 将next方法改为箭头函数, 这样next方法中就不在绑定this, this回去上层作用域中寻找, 上层作用域中的this会指向info
          next: () => {
        
            if (index < this.friends.length) {
        
              return {
         done: false, value: this.friends[index++] }
            } else {
        
              return {
         done: true }
            }
          }
        }
        return infoIterator
      }
    }

**当然我们要问一个问题，我们转成这样的一个东西有什么好处呢？**

*  当**一个对象变成一个可迭代对象**的时候，就可以**进行某些迭代操作**；
 *  比如 **for…of** 操作时(当然不仅限于for…of)，其实就会调用它的 \[Symbol.iterator\] 方法(@@iterator)；
    
        // 例如上面的info对象本来是没办法for...of操作的, 变成可迭代对象后就可以进行for...of操作
        for (item of info) {
              
          console.log(item) // aaa bbb ccc
        }

#### 2.2 可迭代对象特点 ####

**上面我们将info变成可迭代对象可以发现可迭代对象会具备一下特点:**

1.  可迭代对象我们一定\*\*可以访问它的\[Symbol.iterator\]\*\*方法
    
        info[Symbol.iterator]
2.  调用 **\[Symbol.iterator\]方法一定会返回一个迭代器**
    
        const iterator = info[Symbol.iterator]()
3.  可以调用返回的迭代器的next方法, 对 对象进行迭代
    
        const iterator = info[Symbol.iterator]()
        console.log(iterator.next()) // {done: false, value: 'aaa'}
        console.log(iterator.next()) // {done: false, value: 'bbb'}
        console.log(iterator.next()) // {done: false, value: 'ccc'}
        console.log(iterator.next()) // {done: true}

#### 2.3 原生迭代器对象 ####

**事实上我们平时创建的很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的：**

*  比如 : String、Array、Map、Set、arguments对象、NodeList集合；

**我们都知道数组是一个可迭代对象, 那么数组是不是有\[Symbol.iterator\]方法并且满足我们刚刚总结的特点呢? 我们来验证一下**

1.  打印数组的\[Symbol.iterator\]方法, 我们发现确实有这样一个函数
    
        const nums = [10, 20, 30]
        console.log(nums[Symbol.iterator]) // ƒ values() { [native code] }
2.  调用数组的\[Symbol.iterator\]方法, 我们发现会返回一个数组的迭代器
    
        const nums = [10, 20, 30]
        console.log(nums[Symbol.iterator] ()) // Array Iterator {}
3.  并且我们**可以拿到这个数组的迭代器, 通过迭代器的next方法访问数组元素**
    
        const nums = [10, 20, 30]
        const iterator = nums[Symbol.iterator]()
        console.log(iterator.next()) // {value: 10, done: false}
        console.log(iterator.next()) // {value: 20, done: false}
        console.log(iterator.next()) // {value: 30, done: false}
        console.log(iterator.next()) // {value: undefined, done: true}

**由此发现, 数组中是有一个实现好了的迭代器, 因此数组是一个可迭代对象, 数组可迭代的原理我们就很清楚了, 其他可迭代对象同理**

#### 2.4 可迭代对象场景 ####

\*\*上面我们已经讲过, 可迭代对象可以使用for…of, 那么除此之外还可以应用在以下场景 \*\*:

*  **JavaScript中语法**：for …of、展开语法（spread syntax）、yield\*（后面讲）、解构赋值（Destructuring\_assignment）；
 *  **创建一些对象时**：new Map(\[Iterable\])、new WeakMap(\[iterable\])、new Set(\[iterable\])、new WeakSet(\[iterable\]);
 *  **一些方法的调用**：Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable);

**简单举几个例子:**

// 例如两个对象, 一个转为可迭代对象的info, 一个是默认对象obj
    const obj = {
        
      name: "kaisa",
      age: 18
    }
    const info = {
        
      friends: ["aaa", "bbb", "ccc"],
      [Symbol.iterator] () {
        
        let index = 0
        const infoIterator = {
        
          next: () => {
        
            if (index < this.friends.length) {
        
              return {
         done: false, value: this.friends[index++] }
            } else {
        
              return {
         done: true }
            }
          }
        }
        return infoIterator
      }
    }
    
    // 1.可迭代对象可以使用展开语法
    console.log(...info) // aaa bbb ccc
    // 普通对象不可使用展开语法
    console.log(...obj) //  Found non-callable @@iterator
    
    // 2.set方法也是要求传入可迭代对象
    const set1 = new Set(info)
    console.log(set1) // Set(3) {'aaa', 'bbb', 'ccc'}
    // 普通对象传入就会报错
    const set2 = new Set(obj)
    console.log(set2)
    
    // 3.转为数组的方法Array.from也是要求传入可迭代对象
    const arr1 = Array.from(info)
    console.log(arr1) // ['aaa', 'bbb', 'ccc']
    // 不可迭代对象无法正确转为数组
    const arr2 = Array.from(obj)
    console.log(arr2) // []

#### 2.5 自定义类的迭代 ####

**在前面我们看到Array、Set、String、Map等类创建出来的对象都是可迭代对象：**

*  在面向对象开发中，我们可以通过**class定义一个自己的类，这个类可以创建很多的对象**：
 *  如果我们也**希望自己的类创建出来的对象默认是可迭代的**，那么在设计类的时候**在类的实例方法上添加迭代器**；

**自定义类的迭代的实现: 写一个案例尝试创建一系列可迭代对象**

class Person {
        
      constructor(name, age, friends) {
        
        this.name = name
        this.age = age
        this.friends = friends
      }
    
      // 添加实例方法, 迭代器
      [Symbol.iterator] () {
        
        let index = 0
        return {
        
          next: () => {
        
            if (index < this.friends.length) {
        
              return {
         done: false, value: this.friends[index++] }
            } else {
        
              return {
         done: true }
            }
          }
        }
      }
    }
    
    // 这样Person类创建出来的对象都是可迭代对象
    const p1 = new Person("kaisa", 18, ["aaa", "bbb", "ccc"])
    const p2 = new Person("coder", 19, ["ddd", "eee", "fff"])
    
    // 可以进行for...of操作
    for (item of p1) {
        
      console.log(item) // aaa bbb ccc
    }
    for (item of p2) {
        
      console.log(item) // ddd eee fff
    }

#### 2.6 迭代器的中断 ####

**迭代器在某些情况下会在没有完全迭代的情况下中断：**

*  如遍历的过程中通过break、return、throw中断了循环操作；
 *  比如在解构的时候，没有解构所有的值；

**那么这个时候我们想要监听中断的话，可以添加return方法：**

*  例如我们用上面的代码举例

class Person {
        
      constructor(name, age, friends) {
        
        this.name = name
        this.age = age
        this.friends = friends
      }
    
      // 添加实例方法, 迭代器
      [Symbol.iterator] () {
        
        let index = 0
        return {
        
          next: () => {
        
            if (index < this.friends.length) {
        
              return {
         done: false, value: this.friends[index++] }
            } else {
        
              return {
         done: true }
            }
          },
          // 添加一个return方法, 用于监听迭代中断, 当迭代器中断就会执行return方法
          return: () => {
        
            console.log("监听到迭代器中断")
            // 迭代器需要返回对象
            return {
         done:true }
          }
        }
      }
    }
    
    const p1 = new Person("kaisa", 18, ["aaa", "bbb", "ccc"])
    
    for (item of p1) {
        
      console.log(item) // aaa bbb
    
      // 如果在某种情况写退出了循环, 我们需要告知迭代器
      if (item === "bbb") {
        
        break
      }
    }

### 3.生成器介绍 ###

#### 3.1 什么是生成器 ####

**生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。**

*  平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常。

**生成器函数也是一个函数，但是和普通的函数有一些区别：**

*  首先，**生成器函数需要在function的后面加一个符号：\***
 *  其次，**生成器函数可以通过yield关键字来控制函数的执行流程**
 *  最后，**生成器函数的返回值是一个Generator（生成器）**

**生成器事实上是一种特殊的迭代器**

#### 3.2 生成器函数执行 ####

**我们在代码中演示一下**:

1.  **生成器需要在function后面添加一个符号 \***

// 定义了一个生成器函数
    function* foo() {
        
      console.log("00001")
      console.log("00002")
      console.log("00003")
      console.log("00004")
      console.log("00005")
      console.log("00006")
    }
    
    foo()

1.  **生成器代码的执行可以被yield控制**

// 定义了一个生成器函数
    function* foo() {
        
      console.log("00001")
      console.log("00002")
      yield
      console.log("00003")
      console.log("00004")
      yield
      console.log("00005")
      console.log("00006")
    }
    
    foo()

1.  生成器函数默认在执行时, **返回的也是一个生成器对象**, 我们发现上面代码中, **调用函数时函数内部的代码并没有执行**
    
    **如果想要执行函数内部的代码, 需要调用返回的生成器对象的next方法**
    
    **当函数内部代码, 遇到yield时会中断执行**

// 1.定义了一个生成器函数
    function* foo() {
        
      console.log("00001")
      console.log("00002")
      yield console.log("aaaaa")
      console.log("00003")
      console.log("00004")
      yield
      console.log("00005")
      console.log("00006")
    }
    
    // 2.调用生成器函数, 会返回一个生成器对象
    const generator =  foo()
    // 当遇到yield时 会执行到与yield右边的代码后中断 yield左边如果有代码不执行 例如上面第一个yield后面还有代码也会执行
    generator.next() // 00001 00002 aaaaa
    generator.next() // 00003 00004
    generator.next() // 00005 00006

1.  **我们之前学习迭代器时，知道迭代器的next是会有返回值的, 而生成器也是一个特殊的迭代器, 那么我们看一下生成器调用next方法会返回什么**

function* foo() {
        
      console.log("00001")
      console.log("00002")
      yield
      console.log("00003")
      console.log("00004")
      yield
      console.log("00005")
      console.log("00006")
    }
    
    // 生成器返回一个生成器
    const generator =  foo()
    console.log(generator.next()) // {value: undefined, done: false}
    console.log(generator.next()) // {value: undefined, done: false}
    console.log(generator.next()) // {value: undefined, done: true}

1.  **但是我们很多时候不希望next返回的是一个undefined，这个时候我们可以通过yield来返回结果；**

function* foo() {
        
      console.log("00001")
      console.log("00002")
      yield "aaaaa"
      console.log("00003")
      console.log("00004")
      yield "bbbbb"
      console.log("00005")
      console.log("00006")
    }
    
    // 生成器返回一个生成器
    const generator =  foo()
    console.log(generator.next()) // {value: "aaaaa", done: false}
    console.log(generator.next()) // {value: "bbbbb", done: false}
    console.log(generator.next()) // {value: undefined, done: true}

#### 3.3 生成器传递参数 ####

**函数既然可以暂停来分段执行，那么函数应该是可以传递参数的，我们是否可以给每个分段来传递参数呢？**

*  答案是可以的, 我们在**调用next函数的时候，可以给它传递参数**，那么**这个参数会作为上一个yield语句的返回值**；

function* foo(name1) {
        
      console.log("00001", name1)
      console.log("00002", name1)
      const name2 = yield "aaaaa"
      console.log("00003", name2)
      console.log("00004", name2)
      const name3 = yield "bbbbb"
      console.log("00005", name3)
      console.log("00006", name3)
    }
    
    // 生成器返回一个生成器
    const generator =  foo("name1")
    // 第一次传递参数是通过函数传递
    console.log(generator.next("name1"))
    
    // 第二次及后面开始传递参数, 是通过yield
    console.log(generator.next("name2"))
    console.log(generator.next("name3"))

#### 3.4 生成器提前结束 ####

**还有一个可以给生成器函数传递参数的方法是通过return函数**：

*  **return传值后**这个生成器函数就会结束，之后**调用next不会继续生成值了**；

function* foo(name1) {
        
      console.log("00001", name1)
      console.log("00002", name1)
      const name2 = yield "aaaaa"
      console.log("00003", name2)
      console.log("00004", name2)
      const name3 = yield "bbbbb"
      console.log("00005", name3)
      console.log("00006", name3)
    }
    
    // 生成器返回一个生成器
    const generator =  foo("name1")
    console.log(generator.next("name1")) // {value: 'aaaaa', done: false}
    // 通过return提前结束生成器
    console.log(generator.return("name2")) // {value: 'name2', done: true}
    // return之后再通过next调用不会继续生成值
    console.log(generator.next("name3")) // {value: undefined, done: true}
    console.log(generator.next()) // {value: undefined, done: true}
    console.log(generator.next()) // {value: undefined, done: true}

#### 3.5 生成器抛出异常 ####

**除了给生成器函数内部传递参数之外，也可以给生成器函数内部抛出异常：**

*  **抛出异常后我们可以在生成器函数中捕获异常**；
 *  但是在catch语句中不能继续yield新的值了，但是可以在catch语句外使用yield继续中断函数的执行；
 *  目前未学习捕获异常语句, 了解即可

function* foo(name1) {
        
      console.log("00001", name1)
      console.log("00002", name1)
      const name2 = yield "aaaaa"
      console.log("00003", name2)
      console.log("00004", name2)
      const name3 = yield "bbbbb"
      console.log("00005", name3)
      console.log("00006", name3)
    }
    
    // 生成器返回一个生成器
    const generator =  foo("name1")
    console.log(generator.next("name1")) // {value: 'aaaaa', done: false}
    console.log(generator.throw("name2 throw")) // Uncaught name2 throw
    console.log(generator.return("name2"))
    console.log(generator.next("name3"))

### 4.生成器应用 ###

#### 4.1 生成器替代迭代器 ####

**我们发现生成器是一种特殊的迭代器，那么在某些情况下我们可以使用生成器来替代迭代器：**

*  我们前面学习迭代器的时候, 有**写过下面这样一个案例用于实现一个迭代器**

function createArrayIterator(arr) {
        
      let index = 0
      return {
        
        next: function() {
        
          if (index < arr.length) {
        
            return {
         done: false, value: arr[index++] }
          } else {
        
            return {
         done: true }
          }
        }
      }
    }

*  我们可以**利用生成器替代迭代器进行优化**

const names = ["aaa", "bbb", "ccc"]
    
    function* createArrayIterator(arr) {
        
      for (let i = 0; i < arr.length; i++) {
        
        yield arr[i]
      }
    }
    
    const namesIterator = createArrayIterator(names)
    console.log(namesIterator.next()) // {value: 'aaa', done: false}
    console.log(namesIterator.next()) // {value: 'bbb', done: false}
    console.log(namesIterator.next()) // {value: 'ccc', done: false}
    console.log(namesIterator.next()) // {value: undefined, done: true}

*  **事实上我们还可以使用yield\*来生产一个可迭代对象**：这个时候相当于是**一种yield的语法糖**，只不过会**依次迭代这个可迭代对象，每次迭代其中的一个值**；

const names = ["aaa", "bbb", "ccc"]
    
    function* createArrayIterator(arr) {
        
        yield* arr
    }
    
    const namesIterator = createArrayIterator(names)
    console.log(namesIterator.next()) // {value: 'aaa', done: false}
    console.log(namesIterator.next()) // {value: 'bbb', done: false}
    console.log(namesIterator.next()) // {value: 'ccc', done: false}
    console.log(namesIterator.next()) // {value: undefined, done: true}

**生成器案例: 定义一个生成器, 可以创建某个范围的值**

*  例如: 生成 \[3, 9) 之间的值

function* createRangeGenerator(start, end) {
        
      for (let i = start; i < end; i++) {
        
        yield i
      }
    }
    
    const numsGenerator = createRangeGenerator(3, 9)
    console.log(numsGenerator.next()) // {value: 3, done: false}
    console.log(numsGenerator.next()) // {value: 4, done: false}
    console.log(numsGenerator.next()) // {value: 5, done: false}
    console.log(numsGenerator.next()) // {value: 6, done: false}
    console.log(numsGenerator.next()) // {value: 7, done: false}
    console.log(numsGenerator.next()) // {value: 8, done: false}
    console.log(numsGenerator.next()) // {value: undefined, done: true}

#### 4.2 生成器实现自定义类迭代 ####

**在迭代器的时候我们创建过一个自定义类, 用于创建一系列可迭代对象** :

class Person {
        
      constructor(name, age, friends) {
        
        this.name = name
        this.age = age
        this.friends = friends
      }
    
      // 添加实例方法, 迭代器
      [Symbol.iterator] () {
        
        let index = 0
        return {
        
          next: () => {
        
            if (index < this.friends.length) {
        
              return {
         done: false, value: this.friends[index++] }
            } else {
        
              return {
         done: true }
            }
          }
        }
      }
    }
    
    // 这样Person类创建出来的对象都是可迭代对象
    const p1 = new Person("kaisa", 18, ["aaa", "bbb", "ccc"])
    
    // 可以进行for...of操作
    for (item of p1) {
        
      console.log(item) // aaa bbb ccc
    }

**这个自定义类我们也可以换成生成器, 对上面代码优化**:

class Person {
        
      constructor(name, age, friends) {
        
        this.name = name
        this.age = age
        this.friends = friends
      }
    
      // 添加实例方法, 迭代器前面加上*变为生成器
      *[Symbol.iterator] () {
        
        // yield*后面跟要迭代的对象
        yield* this.friends
      }
    }
    
    // 进行for...of操作
    const p1 = new Person("kaisa", 18, ["aaa", "bbb", "ccc"])
    for (item of p1) {
        
      console.log(item) // aaa bbb ccc
    }

### 5.生成器异步处理 ###

#### 5.1 普通处理方案 ####

**学完了我们前面的Promise、生成器等，我们目前通过一个案例来看一下异步代码的处理方案。**

**案例需求** :

*  我们需要**向服务器发送网络请求获取数据，一共需要发送三次请求**；
 *  第二次的请求url依赖于第一次的结果；
 *  第三次的请求url依赖于第二次的结果, 依次类推；

**方式一 : 层层嵌套(回调地狱)**

// 封装函数模拟网络请求
    function requestDate(url) {
        
      return new Promise((resolve, reject) => {
        
        setTimeout(() => {
        
          resolve(url)
        }, 2000)
      })
    }
    
    function getData() {
        
      // 发送第一次网络请求
      requestDate("aaa").then(res1 => {
        
        console.log("第一次网络请求的结果:", res1) // aaa
        // 发送第二次网络请求
        requestDate(res1 + "bbb").then(res2 => {
        
          console.log("第二次网络请求的结果:", res2) // aaabbb
          // 发送第三次网络请求
          requestDate(res2 + "ccc").then(res3 => {
        
            console.log("第三次网络请求的结果:", res3) // aaabbbccc
          })
        })
      })
    }
    getData()

**方式二: 使用Promise进行优化, 解决回调地狱(链式编程)**

// 封装函数模拟网络请求
    function requestDate(url) {
        
      return new Promise((resolve, reject) => {
        
        setTimeout(() => {
        
          resolve(url)
        }, 2000)
      })
    }
    
    function getData() {
        
      requestDate("aaa").then(res1 => {
        
        console.log("第一次网络请求的结果:", res1) // aaa
        return requestDate(res1 + "bbbb")
      }).then(res2 => {
        
        console.log("第二次网络请求的结果:", res2) // aaabbb
        return requestDate(res2 + "ccc")
      }).then(res3 => {
        
        console.log("第三次网络请求的结果:", res3) // aaabbbccc
      })
    }
    getData()

#### 5.2 生成器方案 ####

上面的代码**即使方式二使用Promise对代码进行了重构**, 但是**代码看起来也是阅读性依然比较差**的，有没有办法可以**继续来对上面的代码进行优化**呢？

*  **方式三: 利用生成器再进一步的优化**

// 封装函数模拟网络请求
    function requestDate(url) {
        
      return new Promise((resolve, reject) => {
        
        setTimeout(() => {
        
          resolve(url)
        }, 2000)
      })
    }
    
    function* getData() {
        
      const res1 = yield requestDate("aaa")
      console.log("res1", res1) // aaa
      const res2 = yield requestDate(res1 + "bbb")
      console.log("res2", res2) // aaabbb
      const res3 = yield requestDate(res2 + "ccc")
      console.log("res3:", res3) // aaabbbccc
    }
    
    const generator = getData()
    // 因为生成器的next方法返回的对象中的value值是返回的Promise
    // 我们可以通过Promise的then拿到第一次网络请求的结果res1
    generator.next().value.then(res1 => {
        
      // 将第一次网络请求的结果传入生成器函数时, 可以拿到第二次网络请求的结果
      generator.next(res1).value.then(res2 => {
        
        // 将第二次网络请求的结果传入生成器函数, 可以拿到第三次网络请求的结果
        generator.next(res2).value.then(res3 => {
        
          // 将第三次网络请求的结果传入生成器函数
          generator.next(res3)
        })
      })
    })

**目前我们的方案三写法有两个问题：**

*  第一，我们不能确定到底需要调用几层的Promise关系；
 *  第二，如果还有其他需要这样执行的函数，我们应该如何操作呢？

**所以，我们可以封装一个工具函数execGenerator自动执行生成器函数(了解)：**

// 封装模拟网络请求的函数
    function requestData(url) {
        
      return new Promise((resolve, reject) => {
        
        setTimeout(() => {
        
          resolve(url)
        }, 2000)
      })
    }
    
    // 生成器的处理方案
    function* getData() {
        
      const res1 = yield requestData("why")
      console.log("res1:", res1)
    
      const res2 = yield requestData(res1 + "kobe")
      console.log("res2:", res2)
    
      const res3 = yield requestData(res2 + "james")
      console.log("res3:", res3)
    
      const res4 = yield requestData(res3 + "curry")
      console.log("res4:", res4)
    
      const res5 = yield requestData(res4 +"tatumu")
      console.log("res5:", res5)
    }
    
    // 自动化执行生成器函数(了解)
    function execGenFn(genFn) {
        
      // 1.获取对应函数的generator
      const generator = genFn()
      // 2.定义一个递归函数
      function exec(res) {
        
        const result = generator.next(res)
        if (result.done) return
        result.value.then(res => {
        
          exec(res)
        })
      }
      // 3.执行递归函数
      exec()
    }

**函数execGenerator自动执行生成器函数(了解)：**