1. 首页
  2. JavaScript
  3. JavaScript 中 forEach 循环如何中断跳出

JavaScript 中 forEach 循环如何中断跳出

2019/12/02 13:19:50 发表 2019/12/02 13:19:50 更新 原创 雨辰 1008 0 0

在 JavaScript 中使用 Array 对象的forEach()函数遍历数组成员时，如果想要中断跳出，不能使用break、return、continue否则会报错，因为 JavaScript 规定forEach()方法无法中断执行，总是会将所有成员遍历完。

如果希望符合某种条件时，就中断遍历，要使用for循环。或者使用some()或者every()函数，注意，这两个函数始终需要一个返回值true或false，否则会报一个警告。

for 循环 break、continue

1. break 中断遍历

break 中断所在的 for 循环。

  1. var arr = [1, 2, 3, 4, 5];
  3. for (var i = 0; i < arr.length; i++) {
  4.   if (arr[i] === 3) break;
  5.   console.log(`output: ${arr[i]}`);
  6. }
  8. // output: 1
  9. // output: 2

break 中断多重 for 循环。

使用标签，例如下面例子中的outer:和inner:，在 break 后面指定跳出哪一层循环体。

  1. var arr1 = ['a', 'b', 'c'];
  2. var arr2 = [1, 2, 3, 4, 5];
  4. outer:
  5. for (var i = 0; i < arr1.length; i++) {
  6.   console.log('outer: ', arr1[i]);
  7.   inner:
  8.   for (var j = 0; j < arr2.length; j++) {
  9.     if (arr2[j] === 3) break outer;
  10.     console.log('inner: ', arr2[j]);
  11.   }
  12. }
  14. // outer:  a
  15. // inner:  1
  16. // inner:  2

使用多个 break 中断多重 for 循环。每个 break 只负责中断所在 for 循环体。

  1. var arr1 = ['a', 'b', 'c'];
  2. var arr2 = [1, 2, 3, 4, 5];
  4. for (var i = 0; i < arr1.length; i++) {
  5.   console.log('outer: ', arr1[i]);
  6.   for (var j = 0; j < arr2.length; j++) {
  7.     if (arr2[j] === 3) break;
  8.     console.log('inner: ', arr2[j]);
  9.   }
  10.   break;
  11. }
  13. // outer:  a
  14. // inner:  1
  15. // inner:  2

2. continue 跳过循环中的一个迭代

跳过一层 for 循环体。

  1. var arr = [1, 2, 3, 4, 5];
  3. for (var i = 0; i < arr.length; i++) {
  4.   if (arr[i] === 3) continue;
  5.   console.log(`output: ${arr[i]}`);
  6. }
  8. // output: 1
  9. // output: 2
  10. // output: 4
  11. // output: 5

跳过多重 for 循环体。使用标签，跳过指定 for 循环体。与上面 break 的使用是一样的。

  1. var arr1 = ['a', 'b', 'c'];
  2. var arr2 = [1, 2, 3, 4, 5];
  4. outer:
  5. for (var i = 0; i < arr1.length; i++) {
  6.   console.log('outer: ', arr1[i]);
  7.   inner:
  8.   for (var j = 0; j < arr2.length; j++) {
  9.     if (arr2[j] === 3) continue outer;
  10.     console.log('inner: ', arr2[j]);
  11.   }
  12. }
  14. // outer:  a
  15. // inner:  1
  16. // inner:  2
  17. // outer:  b
  18. // inner:  1
  19. // inner:  2
  20. // outer:  c
  21. // inner:  1
  22. // inner:  2

使用多个 continue 跳过多重 for 循环体。

  1. var arr1 = ['a', 'b', 'c'];
  2. var arr2 = [1, 2, 3, 4, 5];
  4. for (var i = 0; i < arr1.length; i++) {
  5.   if(arr1[i] === 'b') continue;
  6.   console.log('outer: ', arr1[i]);
  7.   for (var j = 0; j < arr2.length; j++) {
  8.     if (arr2[j] === 3) continue;
  9.     console.log('inner: ', arr2[j]);
  10.   }
  11. }
  13. // outer:  a
  14. // inner:  1
  15. // inner:  2
  16. // inner:  4
  17. // inner:  5
  18. // outer:  c
  19. // inner:  1
  20. // inner:  2
  21. // inner:  4
  22. // inner:  5

使用 some() 或 every() 函数

注意使用这两个函数时，无论是否满足条件，都要返回一个 Boolean（布尔值），否则会报一个警告。

1. 使用 some() 函数中断循环

some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。

  1. var arr = [1, 2, 3, 4, 5];
  3. var bl = arr.some(function (elem, index, arr) {
  4.   console.log('output: ', elem);
  5.   if(elem >= 3){
  6.     return true;
  7.   }
  8.   return false;
  9. });
  10. console.log(bl);
  12. // output: 1
  13. // output: 2
  14. // output: 3
  15. // true

2. 使用 every() 函数中断循环

every方法是所有成员的返回值都是true，整个every方法才返回true，否则返回false。

  1. var arr = [1, 2, 3, 4, 5];
  3. var bl = arr.every(function (elem, index, arr) {
  4.   console.log('output: ', elem);
  5.   if(elem >= 3){
  6.     return false;
  7.   }
  8.   return true;
  9. });
  10. console.log(bl);
  12. // output: 1
  13. // output: 2
  14. // output: 3
  15. // false

参考文献

http://wangdoc.com/javascript/stdlib/array.html#some%EF%BC%8Cevery

（完）