用迭代器扩展 TypeScript 功能 - 提升代码可控性，解锁无限可能

前端

2023-09-16 15:51:56

TypeScript 迭代器简介

迭代器是一种特殊对象，它符合迭代器协议规范。在 TypeScript 中，我们可以定义一个接口，这个接口上有一个函数类型 next，next() 方法的返回值类型是 { value: any, done: boolean }。

value：当前元素的值。
done：一个布尔值，表示迭代器是否已经遍历完所有元素。

如何创建迭代器

在 TypeScript 中，我们可以通过两种方式创建迭代器：

定义一个类，该类实现了 Iterator 接口。
使用 Generator 函数。

使用迭代器遍历数据

我们可以使用 for...of 循环来遍历迭代器。

// 使用类实现的迭代器
class NumberIterator implements Iterator<number> {
  private numbers: number[];
  private index: number;

  constructor(numbers: number[]) {
    this.numbers = numbers;
    this.index = 0;
  }

  next(): { value: number; done: boolean } {
    if (this.index < this.numbers.length) {
      return { value: this.numbers[this.index++], done: false };
    } else {
      return { value: undefined, done: true };
    }
  }
}

// 使用 for...of 循环遍历迭代器
const numbers = [1, 2, 3, 4, 5];
const iterator = new NumberIterator(numbers);
for (const number of iterator) {
  console.log(number); // 1 2 3 4 5
}

// 使用 Generator 函数实现的迭代器
function* numberGenerator(numbers: number[]) {
  for (const number of numbers) {
    yield number;
  }
}

// 使用 for...of 循环遍历迭代器
const numbers = [1, 2, 3, 4, 5];
const iterator = numberGenerator(numbers);
for (const number of iterator) {
  console.log(number); // 1 2 3 4 5
}