TypeScript从精通到入门9：ts中的迭代器和生成器

在 TypeScript（以及 JavaScript）中，迭代器和生成器是用于处理集合数据（如数组、对象等）的强大工具。它们允许你按顺序访问集合中的元素，并提供了一种控制数据访问的方式。

迭代器（Iterator）

迭代器是一个对象，它定义了一个序列，并且提供了一种方法来访问这个序列的元素。迭代器对象实现了 Iterator 接口，该接口要求它有一个 next() 方法。

Iterable 接口

一个对象如果实现了Iterable接口，那么它就是可迭代的。这个接口要求对象必须有一个[Symbol.iterator]()方法，这个方法返回一个迭代器对象。

Iterator 接口

迭代器对象必须实现Iterator接口。这个接口定义了next()方法，该方法返回一个对象，这个对象有两个属性：value和done。value表示当前的元素值，done是一个布尔值，表示是否还有更多的元素可以迭代。

示例

下面是一个简单的迭代器示例

class MyIterable implements Iterable<number> {  
  [Symbol.iterator](): Iterator<number> {  
    let index = 0;  
    const data = [1, 2, 3, 4, 5];  
    return {  
      next(): IteratorResult<number> {  
        if (index < data.length) {  
          return { value: data[index++], done: false };  
        } else {  
          return { value: undefined, done: true };  
        }  
      }  
    };  
  }  
}  
  
const iterable = new MyIterable();  
for (const value of iterable) {  
  console.log(value); // 输出 1, 2, 3, 4, 5  
}

在这个例子中，MyIterable类实现了Iterable接口，并提供了[Symbol.iterator]()方法。这个方法返回一个迭代器对象，该对象有一个next()方法用于获取下一个元素。然后，我们可以使用for...of循环来遍历iterable对象。

生成器（Generator）

生成器是一种特殊的函数，它返回一个迭代器对象。生成器函数使用function*语法声明，并且可以用yield关键字来返回序列中的每个值。当生成器函数被调用时，它并不立即执行，而是返回一个迭代器对象。每次调用迭代器的next()方法时，生成器函数执行到下一个yield表达式，并返回该表达式的值。

示例

下面是一个简单的生成器示例：

function* numberGenerator() {  
  yield 1;  
  yield 2;  
  yield 3;  
  yield 4;  
  yield 5;  
}  
  
const generator = numberGenerator();  
  
console.log(generator.next().value); // 输出 1  
console.log(generator.next().value); // 输出 2  
console.log(generator.next().value); // 输出 3  
// ... 以此类推

在这个例子中，numberGenerator是一个生成器函数，它使用yield关键字来依次返回数字1到5。然后，我们创建一个生成器对象generator，并调用其next()方法来获取序列中的每个值。

生成器特别适用于处理需要逐步生成或计算的序列，如懒加载、无限滚动等场景。它们提供了一种高效且灵活的方式来处理这些数据。