在 Web 开发中，我们经常需要处理 HTML 表格中的数据。然而，由于表格数据量可能非常大，如果使用传统的同步方法来处理数据，可能会阻塞主线程，导致页面出现“假死”现象。
为了解决这个问题，ES9 引入了异步迭代器的概念。本文将介绍如何使用异步迭代器来处理 HTML 表格的数据，并提供示例代码。
异步迭代器简介
异步迭代器是一种新的迭代器类型，它允许我们异步获取迭代器的下一个值。它通过 Symbol.asyncIterator 标识符来定义，并在 Object.prototype 上定义了一个默认实现。
为此，我们需定义一个异步方法，该方法使用 yield 语句返回一个 Promise 对象，该对象包含要在下一个迭代步骤中使用的值，当该值已准备好时，该 Promise 对象将解决。
下面的示例代码演示了如何使用异步迭代器处理数组异步：
-- -------------------- ---- -------
----- --- - --- -- -- -- ---
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - ----------- -
----- --- --------------- -- ------------------- -------
------ - ------ --------- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
-
--
------ -- -- -
--- ----- ------ ---- -- -------------- -
------------------
-
-----异步迭代器处理 HTML 表格数据
现在，我们已经了解了异步迭代器的概念，接下来我们将探讨如何使用异步迭代器处理 HTML 表格中的数据。
假设我们有以下 HTML 表格：
-- -------------------- ---- -------
------ ----------------
----
-----------
-------------
--------------
-----
----
----------
-------- --------
-------------------------
-----
----
----------
-------- --------
-------------------------
-----
----
----------
------- ----------
------------------------
-----
--------我们可以使用以下示例代码使用异步迭代器处理数据：
-- -------------------- ---- -------
----- --------- ------------------------- -
----- ---- - -----------------------------
----- ------- - ------------------------------------------------- -- ---------------------
--- - - --
----- -- - ------------ -
----- --- - ----------
----- ----- - --------------------------------------------- -- ---------------------
----- ---- - ---
--- ---- - - -- - - --------------- ---- -
---------------- - ---------
-
----- -----
-
-
------ -- -- -
----- ----- - --------------------------------------
--- ----- ------ ---- -- -------------------------- -
------------------
-
-----在上面的示例代码中，我们从表格中获取了表头，然后使用 while 循环迭代表格的所有行。在每次迭代中，我们获取当前行的单元格数据，然后将其存储在一个对象中并使用 yield 语句返回。
在循环结束后，我们使用 for await...of 语句检索生成的异步迭代器中的所有数据，然后打印出所有行的数据。
结论
在本文中，我们介绍了异步迭代器的概念，并使用示例代码演示了如何使用异步迭代器处理 HTML 表格中的数据。通过使用异步迭代器，我们可以避免主线程的阻塞，消除了处理大量数据时出现“假死”现象的风险，从而提高了 Web 应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672eeca4eedcc8a97c8b6caa