解决forEach无法退出循环问题

做项目时，习惯使用forEach来代替for循环，我们都知道for循环里要跳出整个循环是使用break，但在数组中用forEach循环如果要退出整个循环使用break会报错，return也无法跳出循环。也就是说forEach遍历并不能被终止

问题

【1】在fromEach中使用break

    let arr = ['1', '2', '3', '4', '5'];
    arr.forEach(item=>{
      if(item == '3') {
        break
      }
      console.log(item) // 结果：报错 Uncaught SyntaxError: Illegal break statement at Array.forEach (<anonymous>)
    })

image.gif

【2】在fromEach中使用return

    let arr = ['1', '2', '3', '4', '5'];
    arr.forEach(item=>{
      if(item == '3') {
        return
      }
      console.log(item) // 结果：1 2 4 5 只能终止本次循环，执行下一次循环，并不能跳出循环
    })

解决方法

【1】通过for来遍历实现

    let arr = ['1', '2', '3', '4', '5'];
     for(let i=0; i<arr.length; i++) {
       if(arr[i] == '3') break;
       console.log(arr[i]) // 1 2
     }

【2】通过try···catch抛出异常的方式实现

通过抛出异常的方式实现终止循环(forEach无法通过正常流程结束循环)

    let arr = ['1', '2', '3', '4', '5'];
    try {
      arr.forEach((item, index) => {
        if (item === '3') {
          throw new Error('End')
        }
        console.log(item) // 1 2 
      })
    } catch (e) {
      if (e.message === 'End') throw e;
    }

【3】通过reduce迭代实现，需设置一个中断flag

   let arr = ['1', '2', '3', '4', '5'];
    arr.reduce(function (p, c) {
      if (c == '3') {
        this.break = true
      }
      if (this.break) {
        return
      }
      console.log(c) // 1 2
    }, '') 

【4】数组的另外两个方法some与every（不建议使用）

some()当内部return true时跳出整个循环

    let arr = ['1', '2', '3', '4', '5'];
    arr.some(item=> {
      if (item == '3') {
        return true;
      }
      console.log(item);
    });

every()当内部return false时跳出整个循环

    let arr = ['1', '2', '3', '4', '5'];
    arr.every(item=> {
      if (item == '3') {
        return false;
      } else {
        console.log(item);
        return true;
      }
    });

从实现上表达出的语义来讲，some像是在说：有一个成功，我就成功，而every像是在说：有一个失败，我就失败。

一般情况下，我们用some和every是要用它返回的结果。这里只是简简单单利用了其循环罢了。这么写代码可读性不是很高，但确实是替换掉for的一种方式，不过every要保证在退出循环之前的迭代都返回true

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料