在前端开发中，我们经常要处理大量的数据，并对这些数据进行遍历和操作。在 TypeScript 中，可以通过使用迭代器和生成器来优化数据处理的过程。
迭代器
迭代器是一个对象，它提供了一种方法来按照顺序访问集合中的元素，而无需知道实现方式。在 TypeScript 中，迭代器是通过实现 Iterable 接口来完成的。
Iterable 接口
Iterable 接口定义了一个返回迭代器的方法。它包含一个 Symbol.iterator 方法，该方法返回一个迭代器对象。
下面是 Iterable 接口的定义：
interface Iterable<T> {
[Symbol.iterator](): Iterator<T>;
}这里定义了一个泛型接口 Iterable<T>，它要求实现一个名为 [Symbol.iterator] 的方法，返回一个 Iterator<T> 对象。
Iterator 接口
Iterator 接口定义了访问集合中元素的方法。它包含 next() 方法，该方法返回迭代器对象的下一个值。
下面是 Iterator 接口的定义：
interface Iterator<T> {
next(): IteratorResult<T>;
}这里定义了一个泛型接口 Iterator<T>，它要求实现一个名为 next 的方法，返回一个 IteratorResult<T> 对象。
迭代器示例
假设我们有一个简单的数组，并且我们想要按顺序迭代它。我们可以使用迭代器来遍历这个数组：
let myArray = [1, 2, 3];
let it = myArray[Symbol.iterator]();
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: 3, done: false }
console.log(it.next()); // { value: undefined, done: true }这里我们先获取了 myArray 的迭代器对象 it，然后使用 next() 方法逐个遍历数组元素。当所有元素都被访问完毕时，done 属性变为 true，并返回 undefined。
生成器
生成器允许你在执行过程中暂停函数的执行，并在需要时恢复执行过程。在 TypeScript 中，生成器是一种特殊类型的函数，用 function* 关键字声明。
生成器示例
以下是一个使用生成器的示例：
-- -------------------- ---- ------- --------- ----------- - ----- -- ----- -- ----- -- - --- --- - ------------ ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ ---------- ----- ---- -
这里我们定义了一个生成器函数 generator()，它返回一组值。在函数内部，使用 yield 关键字暂停函数的执行，并将值返回给调用者。调用者可以使用 next() 方法继续函数的执行。
TypeScript 中使用迭代器和生成器
理解了迭代器和生成器的基本概念后，我们可以在 TypeScript 中使用它们来遍历数据和处理函数执行过程。
使用迭代器遍历对象
下面是一个使用迭代器遍历对象的示例：
-- -------------------- ---- -------
--- --- - - -- -- -- -- -- - --
-------------------- - --------- -- -
--- ---- --- -- ----- -
----- ----- -----------
-
--
--- ---- ----- ------ -- ---- -
----------------- ------- ------ -----------
-这里我们扩展了对象 obj 的迭代器，返回一个二元组，以便使用 for...of 循环遍历对象每个属性。输出结果为：
Key: a, Value: 1 Key: b, Value: 2 Key: c, Value: 3
使用生成器处理异步函数
下面是一个使用生成器处理异步函数的示例：
-- -------------------- ---- -------
-------- --------------- ------- -
------ --- --------------- -- -
------------------- ----------
---
-
--------- --------- -
---------------------
----- ------------
-------------------
-
----- -------- ----- -
--- ----- ---- ----- -- ---------- -
-------------------
-
-
------这里我们定义了一个生成器函数 process()，它使用 delay() 函数暂停执行。我们还定义了一个异步函数 run()，它使用 for await...of 循环来处理生成器的返回值。输出结果为：
Start
Promise { <pending> }
End
undefined总结
本文介绍了 TypeScript 中如何使用迭代器和生成器。学习了迭代器和生成器的基本概念、Iterable 和 Iterator 接口的定义以及示例代码。通过使用迭代器和生成器，我们可以更好地处理数据和函数执行过程，提高代码的可读性和可组合性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653f3eef7d4982a6eb8c6848