forEach是我們在日常工作中經常使用到的方法，但是你有什么嘗試使用forEach進行停止或終止等操作呢？今天我就遇到了這個問題，借此來剖析一下。

一、走進forEach

之前對于forEach了解的并不多，只知道它可以遍歷數組，如果有這么一個操作： 一個數組[0, 1, 2, 3, 4, 5]，打印出[0, 1, 2, 3]，對于聰明的我可能會這樣寫。

1.1 嘗試return

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

arr.forEach(item => {
	newArr.push(item);
	if (item === 3) {
		returnfalse;
	}
})

console.log(newArr); // ？？？

哈哈，你可能會像我一樣可愛，但是打印的結果不盡人意，還是 [0, 1, 2, 3, 4, 5]。為什么會這樣呢？

首先我們得出了一個結論，forEach不能通過return終止運行。

1.2 嘗試break

我們在嘗試一下for循環中的break，看看效果會不會好一點。

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使用

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指向，具體代碼如下： 下面我們來簡單分析一下

   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) {
		returnfalse;
	}
}

顯然這樣是不可以的，所以forEach不能停止。

三、改造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) {
    returntrue
  }
})

ok！完成

四、總結

通過今天的學習，相信自己以后在遇到類似的問題一定會游刃有余。我總是強調基礎很重要，學習基礎也是一種美。