深入理解ES6之迭代器与生成器

蔚落 2022-04-10 05:09 232阅读 0赞

## 迭代器 ##

迭代器 iterator，在 Javascript 中，迭代器是一个对象（也可称作为迭代器对象），它提供了一个 next() 方法，用来返回迭代序列中的下一项。

next 方法的定义，next 方法是一个函数，执行后返回一个对象包含两个属性：`{ done: [boolean], value: [any] }`

function makeIterator(array) {
      var nextIndex = 0
      return {
        next() {
          return nextIndex < array.length ? 
            { value: array[nextIndex++], done: false } : 
            { done: true }
        }
      }
    }
    
    // iterator 是一个迭代器对象
    var iterator = makeIterator([10, 20, 30])
    iterator.next() // {value: 10, done: false}
    iterator.next() // {value: 20, done: false}
    iterator.next() // {value: 30, done: false}
    iterator.next() // {done: true}

## 可迭代对象 ##

可迭代对象必须实现一个 @@iterator 方法，也就是说在这个对象或者它的原型链上必须有一个方法名是 Symbol.iterator 的方法，当调用这个方法时它返回一个迭代器对象。

可迭代对象的表现形式为，可以使用 `for...of 循环`，`解构赋值`，`拓展运算符(spread)`，`yield*` 这些语法来调用 Symbol.iterator 函数。也就是说这些语法糖在被调用时本质上都是在调用 Symbol.iterator 函数。

### 内置可迭代对象 ###

String，Array，TypedArray，Map，Set，函数的arguments对象，NodeList对象都是内置的可迭代对象，他们的原型对象中都有一个 Symbol.iterator 方法。

// 可迭代对象
    let iterable = [10, 20, 30]
    // 继承自原型链
    Symbol.iterator in iterable // true
    iterable.hasOwnProperty(Symbol.iterator) // false
    
    for(let value of iterable){
        console.log(value)
    }
    // 10
    // 20
    // 30

### 自定义可迭代对象 ###

字面量对象 `let o = {}` 默认没有 Symbol.iterator 方法，但是我们在对象上自定义一个 @@iterator 方法，此时字面量对象也可以使用 for...of循环，拓展运算符等等语法糖。

// 字面量对象默认是不可迭代对象
    // 自定义对
    var myIterable = {}
    myIterable[Symbol.iterator] = function(){
      return {
        arr: [10, 20, 30],
        next: function(){
          if(this.arr.length > 0){
            return {value: this.arr.shift(), done: false}
          }else{
            return {done: true}
          }
        }
      }
    }
    [...myIterable] // [10, 20, 30]

## 生成器 ##

生成器 generator，在 Javascript 中生成器是一个函数(也可称作生成器函数)，它可以作为创建迭代器的工厂函数。生成器函数的返回值是一个迭代器对象，同时这个对象也是一个可迭代对象。

`funtion* name(){ //statement }` 这种声明方式可以定义一个生成器函数。

生成器函数的语法规则是，调用一个生成器函数并不会马上执行它里面的语句，而是返回一个这个生成器的 迭代器（iterator）对象。当这个迭代器的 next() 方法被首次（后续）调用时，其内的语句会执行到第一个（后续）出现yield的位置为止，yield 后紧跟迭代器要返回的值。或者如果用的是 yield\*（多了个星号），则表示将执行权移交给另一个生成器函数（当前生成器暂停执行）。调用 next() 方法时，如果传入了参数，那么这个参数会作为上一条执行的 yield 语句的返回值。

// 生成器函数
    function* generator(i){
        yield i + 1
        var y = yield 'foo'
        yield y
    }
    
    var iterator = generator(10) // 此时生成器函数不执行，返回一个迭代器
    
    iterator.next()   // {value: 11, done: false} 
    iterator.next()   // {value 'foo', done: false}
    iterator.next(10) // {value: 10, done: false}，将10赋值给上一条 yield 'foo' 左侧的值，即 y = 10，返回 y
    iterator.next()   // {done: true}

既然 `生成器函数` 可以创建 `迭代器对象`，我们来试着将前面的例子用生成器函数的形式重写试试看。

// 生成器函数
    function* makeIterator(array) {
      for (let i = 0; i < array.length; i++) {
        yield array[i]
      }
    }
    
    // 迭代器对象，实现和上文一样的功能
    var iteratorByGen = makeIterator([10, 20, 30])
    iteratorByGen.next() // {value: 10, done: false}
    iteratorByGen.next() // {value: 20, done: false}
    iteratorByGen.next() // {value: 30, done: false}
    iteratorByGen.next() // {done: true}

从上面的代码我们可以看到，利用生成器函数来创建一个迭代器对象的方式相比于之前我们普通函数创建的方式更加简洁，也更加清晰的表明调用生成器函数返回的是一个迭代器对象。除此之外还有什么区别呢。

上文已经提到，生成器函数返回的是一个 `可迭代的迭代器对象`，这是什么意思呢？看下代码就明白了。

// 生成器函数创建的迭代器对象
    Symbol.iterator in iteratorByGen // true
    [...iteratorByGen] // [10, 20, 30]
    
    // 普通函数创建的迭代器对象
    Symbol.iterator in iterator // false
    [...iterator] // Uncaught TypeError: iterator is not iterable

综上所述，我们可以确定的说 **生成器函数是创建迭代器对象的语法糖** ，通过生成器函数我们可以用很简洁清晰的语法创建一个可迭代的迭代器对象。

来源：[https://segmentfault.com/a/1190000017529530][https_segmentfault.com_a_1190000017529530]

[https_segmentfault.com_a_1190000017529530]: https://segmentfault.com/a/1190000017529530