JS 的 Array.forEach 方法如何跳出循环

1. for 结束循环

---

众所周知，在 for 循环语句中，遇到 break 会结束循环。但是如何在数组方法 array.forEach() 中如何结束循环呢 ？

1. const arr = ['html', 'css', 'js', 'vue', 'php']
2. for (let i = 0; i < arr.length; i++) {
3. // 第一次循环输出: html
4. // 第二次循环输出: css
5. // 第三次循环输出: js
6. console.log(arr[i]);
7. // 第三次循环时，条件成立，停止循环
8. if (arr[i] == 'js') break;
9. }

2. forEach 结束循环

---

forEach 本身无法跳出循环，但是我们可以通过系统的一些强制性方法使其结束循环，如下所示：

1. try {
2. arr.forEach(item => {
3. if (item == 'js') throw new Error('结束循环');
4. })
5. } catch (error) {
6. console.log(error.message);
7. }

上面写法存在问题，当循环中有一些其他异常时，理应抛出异常，而不是认为是结束循环的异常。改进后：

1. try {
2. arr.forEach(item => {
3. console.log(item);
4. if (item == 'css') item + a; // a is not defined
5. if (item == 'js') throw new Error('结束循环');
6. })
7. } catch (error) {
8. if (error.message !== '结束循环') {
9. throw error;
10. }
11. }

3. 利用高阶函数进行循环

---

Array.some() 方法用于检测数组中的元素是否满足指定条件，有一个满足就停止循环，然后返回 true

也就是闭包函数的返回值为 true 时，停止循环。利用这一特性，可以控制循环中何时返回 true，进行控制何时结束循环

1. const arr = ['html', 'css', 'js', 'vue', 'php']
2. arr.some(item => {
3. // 循环三次，依次输出 html css js
4. console.log(item);
5. if (item == 'js') {
6. return true
7. }
8. })

Array.every() 方法用于检测数组中的所有元素是否满足指定条件，有一个不满足就停止循环，然后返回 false

同理，通过控制返回值，一样能控制何时结束循环

1. const arr = ['html', 'css', 'js', 'vue', 'php']
2. arr.every(item => {
3. // 循环三次，依次输出 html css js
4. console.log(item);
5. if (item == 'js') {
6. return false
7. }
8. return true
9. })

4. 开发中到底应该使用哪种方式

---

开发中，遇到需要循环一个数组，并且当循环到某一个元素时要跳出循环，建议书写方式如下所示：

1. const arr = ['html', 'css', 'js', 'vue', 'php']
3. // 推荐方式一
4. for (let i = 0; i < arr.length; i++) {
5. if (arr[i] == 'js') {
6. break;
7. }
8. }
10. // 推荐方式二
11. arr.some(item => {
12. if (item == 'js') {
13. return true
14. }
15. })