「譯」forEach循環中你不知道的3件事

前言

本文925字，閱讀大約須要7分鐘。

總括: forEach循環中你不知道的3件事。

• 原文地址：3 things you didn’t know about the forEach loop in JS
• 公衆號：「前端進階學習」，回覆「666」，獲取一攬子前端技術書籍

自棄者扶不起，自強者擊不倒。

正文

你以爲你真的學會用forEach了麼？

這是我以前對forEach循環的理解：就是一個普通語義化以後的for循環，能夠被break,continue,return。

這篇文章將向你展現forEach中你可能不瞭解的3件事。

1. return不會中止循環

你以爲下面的代碼在打印1和2以後會中止麼？

array = [1, 2, 3, 4];
array.forEach(function (element) {
  console.log(element);

  if (element === 2) 
    return;
  
});
// Output: 1 2 3 4

答案是不會，上述代碼會正常打印1,2,3,4。若是你有Java背景，你也許會很詫異，這怎麼可能呢？

緣由是咱們在forEach函數中傳了一個回調函數，該回調函數的行爲和普通函數同樣，咱們return操做其實就是普通函數中return。因此並不符合咱們預期將forEach循環打斷。

MDN官方文檔：

注意： 除了拋出異常之外，沒有辦法停止或跳出 forEach() 循環。若是你須要停止或跳出循環， forEach() 方法不是應當使用的工具。

咱們將上述代碼改寫：

const array = [1, 2, 3, 4];
const callback = function(element) {
    console.log(element);
    
    if (element === 2) 
      return; // would this make a difference? no.
}
for (let i = 0; i < array.length; i++) {
    callback(array[i]);
}
// Output: 1 2 3 4

這就是上述代碼實際的執行思路，return操做只做用於當前的函數，天然不會對for循環產生影響

2. 不能break

下面的代碼你以爲會被break掉麼？

const array = [1, 2, 3, 4];
array.forEach(function(element) {
  console.log(element);
  
  if (element === 2) 
    break;
});
// Output: Uncaught SyntaxError: Illegal break statement

不會，甚至這行代碼都不會運行，直接報錯了。

那麼這段代碼如何達到咱們本來想達到的效果呢？

用普通for循環就行了:

const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
  
  if (array[i] === 2) 
    break;
}
// Output: 1 2

3. 不能continue

下面代碼會是跳過2只打印一、三、4嗎？

const array = [1, 2, 3, 4];
array.forEach(function (element) {
  if (element === 2) 
    continue;
  
  console.log(element);
});
// Output: Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement

一樣不會，和break同樣，報錯，這行代碼以後甚至都不會運行。

怎麼達到預期呢?

仍是使用普通的for循環來解決：

for (let i = 0; i < array.length; i++) {
  if (array[i] === 2) 
    continue;
  console.log(array[i]);
}
// Output: 1 3 4

譯者補充

forEach函數的實際運行原理實際上是這樣的，僞代碼以下：

let arr = [1, 2];
arr.forEach(function(ele) {
    console.log(ele);
}); 
// output: 1, 2
// 上面代碼等同於
function func(ele) {
  console.log(ele);
}
for (let i = 0; i < arr.length; i++) {
    func(arr[i])
}
// output: 1, 2

實際上forEach的polyfill實現也是這樣的，在forEach函數中執行一個for循環，在for循環裏調用回調函數。

所以，像下面代碼天然不會符合預期：

let arr = [1, 2];
let sum = 0;
function add(a) {
    return a;
}
arr.forEach(async function(ele) {
  sum += await add(ele);
});
console.log(sum);
// Output：0

改寫以下：

let arr = [1, 2];
let sum = 0;
function add(a) {
    return a;
}
for (let i = 0; i < arr.length; i++) {
    sum += await add(arr[i]);
}
console.log(sum);
// Output：3

---

訂閱更多文章可關注「前端進階學習」，回覆「666」，獲取一攬子前端技術書籍