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