跳到主要内容

TypeScript 迭代器

在编程中，迭代器是一种设计模式，用于遍历集合中的元素。TypeScript 提供了对迭代器的原生支持，使得我们可以轻松地遍历数组、对象、集合等数据结构。本文将详细介绍 TypeScript 中的迭代器，并通过代码示例和实际案例帮助你理解其工作原理和应用场景。

什么是迭代器？​

迭代器是一个对象，它提供了一种标准的方式来逐个访问集合中的元素。在 TypeScript 中，迭代器遵循 Iterator 协议，这意味着它必须实现一个 next() 方法。每次调用 next() 方法时，迭代器会返回一个包含 value 和 done 属性的对象：

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

迭代器的基本用法​

让我们从一个简单的例子开始，了解如何在 TypeScript 中使用迭代器。

typescript
const numbers = [1, 2, 3];
const iterator = numbers[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

在这个例子中，我们使用数组的 Symbol.iterator 方法获取了一个迭代器对象。然后，我们通过调用 next() 方法逐个访问数组中的元素。当所有元素都被遍历后，done 属性变为 true。

自定义迭代器​

除了使用内置的迭代器，我们还可以为自定义对象实现迭代器。以下是一个简单的例子：

typescript
class Counter {
  private count = 0;

  [Symbol.iterator]() {
    return {
      next: () => {
        if (this.count < 3) {
          return { value: this.count++, done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  }
}

const counter = new Counter();
for (const value of counter) {
  console.log(value); // 输出: 0, 1, 2
}

在这个例子中，我们为 Counter 类实现了一个自定义迭代器。每次调用 next() 方法时，计数器会递增，直到达到指定的上限。

迭代器的实际应用​

迭代器在实际开发中有许多应用场景。以下是一些常见的例子：

1. 遍历集合​

迭代器最常见的用途是遍历集合中的元素。例如，我们可以使用迭代器遍历一个数组或集合：

typescript
const fruits = new Set(['apple', 'banana', 'cherry']);
const iterator = fruits[Symbol.iterator]();

let result = iterator.next();
while (!result.done) {
  console.log(result.value); // 输出: apple, banana, cherry
  result = iterator.next();
}

2. 生成无限序列​

迭代器还可以用于生成无限序列。例如，我们可以创建一个生成斐波那契数列的迭代器：

typescript
function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

const fib = fibonacci();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3

在这个例子中，我们使用了 生成器函数（function*）来创建一个无限序列的迭代器。每次调用 next() 方法时，迭代器会返回下一个斐波那契数。

3. 异步迭代器​

TypeScript 还支持 异步迭代器，用于处理异步操作。例如，我们可以创建一个异步迭代器来遍历从 API 获取的数据：

typescript
async function* fetchData(urls: string[]) {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  }
}

(async () => {
  const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];
  const asyncIterator = fetchData(urls);

  for await (const data of asyncIterator) {
    console.log(data);
  }
})();

在这个例子中，我们使用 async function* 创建了一个异步迭代器，用于遍历从多个 URL 获取的数据。

总结​

迭代器是 TypeScript 中一个强大的工具，它提供了一种标准的方式来遍历集合中的元素。通过实现自定义迭代器，我们可以轻松地处理各种数据结构，甚至生成无限序列。此外，异步迭代器还为我们提供了处理异步操作的能力。

提示

如果你对迭代器感兴趣，可以尝试实现一个自定义迭代器来遍历树形结构或图结构。这将帮助你更深入地理解迭代器的工作原理。

附加资源​

练习​

  1. 实现一个自定义迭代器，用于遍历一个二叉树结构。
  2. 使用生成器函数创建一个无限序列的迭代器，例如素数序列。
  3. 尝试实现一个异步迭代器，用于遍历从多个 API 获取的数据。

通过完成这些练习，你将更好地掌握 TypeScript 中的迭代器概念，并能够在实际项目中灵活运用。