在 ES8 中使用终止迭代
在前端开发中，经常需要对数据进行遍历和操作。在 JavaScript 中，我们可以使用 for 循环、forEach() 方法等方式来完成遍历操作。然而，如果需要中途终止循环，我们该如何做呢？
在 ES8 中，引入了一个新特性：终止迭代。它可以帮助我们在遍历数据时，在某个条件满足时中止循环，从而提高代码效率和性能。
如何使用终止迭代？
在 ES8 中，使用终止迭代有两种方式：for-await-of 和 .finally()。下面我们将分别来介绍它们的实现和用法。
- for-await-of
for-await-of 是 ES8 中新增的一个循环语法，它可以遍历任何具有 Symbol.asyncIterator 方法的对象。
现在让我们看一个例子：
-- -------------------- ---- -------
----- -------- -------------- -
----- ------------- - -
----------------------- ----- ---------- -
----- --------
----- --------
----- -------------
-
--
--- ----- ------ ----- -- -------------- -
-------------------
-
-
---------------输出结果：
Hello async iteration!
从上面的代码中，我们可以看到 for-await-of 循环语法需要使用 async/await 方法去处理，我们创建了一个名为 asyncIterable 的对象，其中定义了一个 [Symbol.asyncIterator] 方法来返回一个 async generator 函数。
在循环过程中，我们使用了 const value 来接收循环出来的值，然后通过 console.log() 打印出来。
现在，如果在循环过程中我们想要中止迭代，只需要在循环体内抛出一个错误即可。例如，我们可以修改上面的例子：
-- -------------------- ---- -------
----- -------- -------------- -
----- ------------- - -
----------------------- ----- ---------- -
----- --------
----- --------
----- -------------
-
--
--- -
--- ----- ------ ----- -- -------------- -
-------------------
-- ------ --- -------- ----- --- ----------------- --------
-
- ----- ----- -
--------------------------- -- ---------- -----
-
-
---------------输出结果：
Hello async Unexpected value
从上面的代码中，我们可以看到：当 value 的值为 async 时，我们抛出了一个错误，从而停止了迭代。此时，我们可以通过 catch() 方法来捕获抛出的错误并做出相应的处理。
- .finally()
.finally() 是 ES8 中新增的一个 Promise 方法，它会在 Promise 状态为 resolved 或 rejected 后，无论如何都会被调用。我们可以通过在 Promise 链中添加 .finally() 方法来进行数据处理或资源释放等操作。
下面是一个使用 .finally() 的例子：
-- -------------------- ---- -------
-------- ---------------- -
----- ------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
-------------------- -- -
-------------------
----- --- ----------------- --------
-------------- -- -
---------------------------
------------- -- -
-------------------- ------------
---
-
-----------------输出结果：
Success! Unexpected error Promise completed
从上面的代码中，我们可以看到：在 Promise 的 then() 方法中，我们通过 throw new Error() 方法抛出了一个错误。此时，catch() 方法会捕获到此错误并进行操作，最后 .finally() 方法始终都会被执行。
总结
在 ES8 中，我们可以使用 for-await-of 和 .finally() 两种方式来实现终止迭代。通过这两种方式，我们可以在数据遍历过程中，在某个条件满足时中止循环，提高代码效率和性能。
示例代码已经在上面展示了，读者可以尝试自己编写代码来体验这两种方式的优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64538aa7968c7c53b07e0e36