在前端开发中，我们常常需要遍历数组或对象来执行一些操作，而 forEach 循环是其中常用的一种方式。但是，有时候我们需要在循环过程中跳出循环，这时候该怎么办呢？本文将介绍一种使用 Promise 的技巧来实现 forEach 循环的跳出。
问题描述
假设我们有一个数组，需要对其中的每个元素进行操作，并在某个条件下跳出循环。我们可能会这样写代码：
-- -------------------- ---- -------
----- --- - --- -- -- -- ---
--- ---------- - ------
------------------ -- -
------------------
-- ----- --- -- -
---------- - -----
-
-- ------------ -
-------
-
-- ----
---但是这段代码是不起作用的，因为 forEach 循环中的 return 只能跳出当前的回调函数，而不能跳出整个循环。因此，即使 isFinished 变量被设置为 true，循环仍然会继续执行。
解决方案
为了解决这个问题，我们可以使用 Promise 来实现 forEach 循环的跳出。具体的做法是，将 forEach 循环中的操作封装成一个 Promise，然后使用 Promise.race() 方法来等待这些 Promise 中的任意一个完成，从而实现跳出循环的效果。
-- -------------------- ---- -------
----- --- - --- -- -- -- ---
-------- ----------------- -
------ --- ----------------- -- -
------------------
-- ----- --- -- -
--------------------
- ---- -
-- ----
----------
-
---
-
----- -------- - ---------------------
--------------------------------- -- ----- ------------------- -------------- ----
------------------------------------ -- -
--------------------
---在这段代码中，我们将 forEach 循环中的操作封装成了一个 doSomething() 函数，并将其返回值封装成了一个 Promise。在 doSomething() 函数中，如果当前的元素满足条件，就使用 resolve() 方法返回一个字符串 "finished"，表示循环已经完成。否则，继续执行其他操作，并使用 resolve() 返回一个空值。
接着，我们使用 Array.map() 方法来将数组中的每个元素都转换成一个 Promise。最后，我们在 Promise 数组中添加一个空 Promise，避免在没有元素满足条件时 Promise.race() 一直等待。然后，我们使用 Promise.race() 方法来等待这些 Promise 中的任意一个完成，一旦有 Promise 返回了值，就说明循环已经完成，我们可以在 Promise.race() 的 then() 方法中获取到返回值，从而得知循环的状态。
示例代码
下面是一个完整的示例代码，用来演示如何使用 Promise 实现 forEach 循环的跳出：
-- -------------------- ---- -------
----- --- - --- -- -- -- ---
-------- ----------------- -
------ --- ----------------- -- -
------------------
-- ----- --- -- -
--------------------
- ---- -
-- ----
----------
-
---
-
----- -------- - ---------------------
--------------------------------- -- ----- ------------------- -------------- ----
------------------------------------ -- -
--------------------
---总结
在前端开发中，我们经常需要遍历数组或对象来执行一些操作。如果需要在循环过程中跳出循环，我们可以使用 Promise 来实现。具体的做法是，将 forEach 循环中的操作封装成一个 Promise，然后使用 Promise.race() 方法来等待这些 Promise 中的任意一个完成，从而实现跳出循环的效果。这种技巧不仅能够提高代码的可读性和可维护性，还能够避免循环中的一些问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65153f7a95b1f8cacddae949