ES9 的异步迭代器:提高 for-of 循环的效率

在 JavaScript 中,for-of 循环是我们经常使用的语句之一。它可以迭代一个可迭代对象(Iterable Object),例如 Array、Map、Set、TypedArray、String 等等。然而,在处理大量数据或者数据来源是异步请求的情况下,for-of 循环的效率可能会较低。这时我们可以使用 ES9 中新增的异步迭代器(Async Iterator)来提高 for-of 循环的效率。

异步迭代器是什么?

异步迭代器是一个包含 next() 方法并且返回一个 Promise 的对象。它用来在异步情况下处理大量数据,每次迭代时都会返回一个表示异步操作的 Promise 对象。

异步迭代器的结构可以看作下面这样:

-- -----
----- ------------- - -
  ------------------------ -
    ------ -
      -- --
      ------ -
        ----- ----- - ------------------ -- ----
        ----- ---- - - -- -----------
        ------ ----------------------- -------
      -
    --
  -
--

在上面的例子中,我们使用了一个数组 arr 作为数据来源,然后每次调用 next() 方法都会执行一个异步操作 asyncOperation。当数据迭代结束时,返回的 Promise 对象将会带着 {done: true}

在 for-of 循环中使用异步迭代器

使用异步迭代器,我们可以改进 for-of 循环的效率。下面是一个简单的示例:

----- -------- --------- -
  ----- ------------- - ------------------------- ------
  --- ----- ------ - -- -------------- -
    ---------------
  -
-

在上面的例子中,iterate() 函数的执行过程如下:

  1. 调用 createAsyncIterable(),创建一个包含两个字符的数组的异步迭代器。
  2. for-await-of 循环中,每次迭代都会由 asyncIterable 对象返回一个 Promise 对象,表示异步操作的值和状态。
  3. 当异步操作执行完毕后,Promise 对象的值会返回给 for-await-of 循环的变量 x

示例代码

下面是一段更完整的示例代码,它用一个异步迭代器来从服务器获取数据:

----- -------- - -------------------------------
----- -------- ------------------- -
  ----- ---- - ---
  ----- -------- - ----- ----------------
  ----- ------ - --------------------------
  ----- ------ -
    ----- ------ ------ - ----- --------------
    -- ------ ------
    -----------------
  -
  ------ --- ------------------------
-

-- ---------
----- -------- ------------------------- -
  ----- ---- - ----- --------------------
  ----- -------- - --- ---------------
  --- ---------- - --
  ------ -
    ----- ------ -
      -- ----------- -- ---------------- ------ ------ ------
      ----- ----- - ------------------------------
      ---------- -- --
      ------ ------- ----- -------
    -
  --
-

-- -----------
----- -------- ------------- -
  ----- ----------------- - ----- --------------------------
  --- ----- ------ ---- -- ------------------ -
    ------------------
  -
-

在上面的代码中,我们通过异步请求从服务器获取了一些二进制数据。在 createAsyncDataIterable() 函数中,我们将这些数据包装成了一个异步迭代器。然后我们使用 for-await-of 循环来迭代数据,并将读取到的每一项输出到控制台中。

结论

ES9 中新增的异步迭代器可以提高 for-of 循环处理大量数据或者异步请求的效率。我们可以根据不同的需求来定制异步迭代器的逻辑,从服务器获取数据、将数据分批加载等等操作都可以在异步迭代器中完成。这有助于我们更好地处理大量的异步数据,并带来更好的开发体验。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6738a226317fbffedf11c9b9