JavaScript 是现代前端开发的核心语言之一，它的发展历程中有很多的版本更新，其中 ECMAScript 标准对 JavaScript 的发展起到了至关重要的作用。ECMAScript 2017（ES8）是 ECMAScript 标准的最新版本，它引入了异步函数和异步生成器，让 JavaScript 迭代器的编写更加高效和易用。本文将讲解如何利用异步函数和异步生成器实现高效的 JavaScript 迭代器，并给出相应的示例代码。
异步函数
异步函数使得异步操作成为可能，它是一个使用 async 关键字定义的函数，函数内部可以包含一个或多个异步操作，例如 Ajax 请求、读写文件等。异步函数返回一个 Promise 对象，我们可以使用 then() 方法来获取异步操作的结果。
以下是一个简单的异步函数的示例：
async function getData() {
let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let data = await response.json();
console.log(data);
}
getData();在上面的代码中，我们使用 fetch 函数获取远程 JSON 数据，并将其转换成 JavaScript 对象，然后使用 console.log() 方法输出结果。由于异步函数的异步操作是异步执行的，因此我们需要使用 await 关键字来等待异步操作的完成，确保数据不会在数据加载前被访问。
异步生成器
异步生成器是 JavaScript 迭代器的一种形式，它使用 async 关键字和 yield 关键字来定义异步操作的生成器。异步生成器的生成器函数返回一个异步迭代器，异步迭代器可以使用 for await...of 循环语句进行遍历。每次迭代时，生成器函数可以返回一个异步操作的结果，直到生成器函数返回一个 done 属性的对象为止。
以下是一个简单的异步生成器的示例：
-- -------------------- ---- -------
----- --------- ---------- -
--- ----- - --
----- ------ -
--- -------- - ----- ---------------------------------------------------------------
--- ---- - ----- ----------------
----- -----
-
-
------ -- -- -
--- ----- ---- ---- -- ----------- -
------------------
-- -------- --- --- -
------
-
-
-----在上面的代码中，我们定义了一个异步生成器函数 getTodos()，该函数返回一个异步迭代器，它可以使用 for await...of 循环语句进行遍历。在每次遍历时，生成器函数使用 yield 关键字返回一个远程 JSON 数据，直到生成器函数返回一个 done 属性的对象为止。然后我们使用 for await...of 循环语句遍历异步迭代器并输出结果，如果 todo 的 id 等于 10，就跳出循环。
利用异步函数和异步生成器实现高效的 JavaScript 迭代器
利用异步函数和异步生成器实现高效的 JavaScript 迭代器的步骤如下：
- 定义一个异步生成器函数，每次生成器函数执行时获取一定数量的数据，并使用 yield 返回
- 在异步生成器中使用异步函数来获取远程 JSON 数据
- 使用 for await...of 循环语句和异步迭代器来遍历远程数据
以下是一个将异步函数和异步生成器结合起来实现的示例：
-- -------------------- ---- -------
----- --------- -------------------- --------- -
--- ---------- - --
--- ------- - -----
----- --------- -
--- -------- - ----- --------------------------------------------------------------
--- ---- - ----- ----------------
------- - ----------- --- ---------
----- -----
-
-
------ -- -- -
--- ----- ---- ---- -- -------------------------------------------------------- ---- -
------------------
-
-----在上面的代码中，我们定义了一个异步生成器函数 pagination()，该函数返回一个异步迭代器。生成器函数使用 await 关键字来等待异步操作的结果，并使用 yield 关键字返回一个远程 JSON 数据。我们将 page 的值输出到控制台，然后使用 for await...of 循环语句和异步迭代器遍历远程数据。如果最后返回的数据长度不足 pageSize，则代表数据已经被遍历结束，结束循环。
结论
异步函数和异步生成器是 ECMAScript 2017（ES8）引入的新特性，它们为 JavaScript 迭代器的编写提供了更加高效和易用的方法。我们可以利用异步函数和异步生成器实现高效的 JavaScript 迭代器，可以轻松地处理远程数据。如果你是一个前端开发人员，并且想要提高你的 JavaScript 编程技能，那么你一定要尝试使用异步函数和异步生成器来编写更加高效和易用的 JavaScript 迭代器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c4612ddd3a70eb6d71b87