JS中为什么forEach方法不能终止

forEach是我们在日常工作中经常使用到的方法，但是你有什么尝试使用forEach进行停止或终止等操作呢？

一、走进forEach

对于forEach了解不多的，只知道它可以遍历数组，如果有这么一个操作： 一个数组[0, 1, 2, 3, 4, 5]，打印出[0, 1, 2, 3]，可能会这么写。

1.1 尝试return

?

1 2 3 4 5 6 7 8 9 10 11

const arr = [0, 1, 2, 3, 4, 5]; const newArr = [];   arr.forEach(item => {     newArr.push(item);     if (item === 3) {         return false;     } })   console.log(newArr); // ？？？

　　

打印的结果不尽人意，还是 [0, 1, 2, 3, 4, 5]。为什么会这样呢？

首先我们得出了一个结论，forEach不能通过return终止运行。

1.2 尝试break

我们在尝试一下for循环中的break，看看效果会不会好一点。

?

1 2 3 4 5 6 7 8 9 10 11

const arr = [0, 1, 2, 3, 4, 5]; const newArr = [];   arr.forEach(item => {     newArr.push(item);     if (item === 3) {         break; // SyntaxError: Illegal break statement     } })   console.log(newArr); // ？？？

　　

结果报错了：语法错误，非法的break语句。

二、剖析forEach

对于上边的结果，我们就来看一看forEach的实现原理到底是怎么样的，我猜想万变不离其宗，说到底还是for循环。

2.1 forEach使用

?

1 2 3 4 5

const arr = [0, 1, 2, 3, 4, 5];   arr.forEach((item, index, arr) => {     console.log(item, index, arr); })

　　

 遍历的三个值分别为：值、下标、调用方法的数组对象

2.2 forEach分析

我们先来看一下forEach的特点，为此我专门去MDN上看了一下，得到了以下信息：

?

1	forEach(callbackFn)

　　

1. 首先接收一个回调callbackFn，回调用三个参数（element, index, array）
   • element：数组中正在处理的当前元素；
   • index：数组中正在处理的当前元素的索引；
   • array：调用了 forEach() 的数组本身。
2. 函数没有返回值，默认为undefined。

2.3 自定义myForEach

1. 这里我把自己定义的方法写在数组的原型上，好处就是可复用性， 根据上边得到的信息，我们需要接收一个回调函数（fn），通过for循环改变fn的this指向，具体代码如下： 下面我们来简单分析一下

?

1 2 3 4 5

Array.prototype.myForEach = function (fn) {     for (let i = 0; i < this.length; i ++) {         fn.call(this, this[i], i, this);     } }

　　2. 使用一下自己写好的myForEach看一下打印的结果

const arr = [0, 1, 2, 3, 4, 5];

arr.myForEach((item, index, arr) => {
    console.log(item, index, arr);
})

 不能说完全相同只能说是一模一样。

2.4 深入解析forEach

通过2.3我们可以看到我们的for循环中是一个函数执行，我们最开始的写法就是说我们的return和break是写在了我们的fn中。于是我们就想到了下边这种情况它可以终止吗：

const arr = [0, 1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i ++) {
    fn(arr[i], i, arr);
}

function fn (item, index, array) {
    console.log(item, index, arr);
    if (item === 3) {
        return false;
    }
}

显然这样是不可以的，所以forEach不能停止。

p.s 有一种不推荐的做法是可以终止的，就是在循环体里抛出异常。

eg.

 输出

 

三、改造myForEach

题外话：我这可能属于是吃饱了没事情做，哈哈。

3.1 想法

试想一下，我们能不能通过改造一下我们自己定义的myForEach方法，来达到满足我们的要求，相信聪明的你也能够想到，让for循环终止，我就简单写一下自己的想法把，我们让fn有返回值，在for循环中通过flag变量接收。

3.2 代码实现

Array.prototype.myForEach = function (fn) {
  for (let i = 0; i < this.length; i++) {
    const flag = fn.call(this, this[i], i, this);
    if (flag) {
      break
    }
  }
}

const arr = [0, 1, 2, 3, 4, 5];

arr.myForEach((item, index, array) => {
  console.log(item, index, array)
  if (item === 3) {
    return true
  }
})

 p.s jq的each就是return false中断的,都是大同小异。

四、总结

　　如果一定要跳出当前循环的操作，就不要用forEach。直接用for或者是其他循环函数。