双兔傍地走，安能辨我 forEach 还是 for

今天放学回家，爬楼梯，脑海中还回想着阿菜问我【你知道 forEach、for 循环的区别吗】,回到家 拿起小霸王我就打游戏，跟我哟啥关系 😝

1. forEach 里面不支持 break

  let arr = [1,2,3,4];
  arr.forEach((item, index) => {
      if (item === 3) {
        break; //Uncaught SyntaxError: Illegal return statement
      }
      console.log(item);
  })

2. return："break 你太菜了，让我来"

let arr = [1,2,3,4];
  arr.forEach((item, index) => {
      if(item === 3) {
          return;
      }
      console.log(item); // 1 2 4
  })

跟我想的不太一样哈，在 forEach 里面这个 return 有点，for 循环里面的continue的味道
大家猜，下面这段代码返回啥呢？

  function findItem(arr, it) {
    arr.forEach((item, index) => {
      if (item === it) {
        return index
      }
    })
  }
  let idx = findItem(['a', 'b', '尼码'], 'b'); // undefined

forEach 里面的return是没有返回值的效果的

• for 循环：”既然 forEach 兄不行， 那俺来一试这 return 到底是个甚“
  

let arr = [1, 2, 3];
for(let i = 0, l = arr.length; i < l; i++) {
  if (i === 1) {
    return ; // Illegal return statement
  }
}

直接在for循环中使用return会爆出语法错误；难道我for循环就不配拥有return吗？ 先别急，您接着看

function findItem(arr, it) {
  for(let i = 0, l = arr.length; i < l; i++) {
    if(arr[i] === it) {
      return i;
    }
  }
}
let idx = findItem(['a', '尼码'], 'a'); // 0

虽然直接用不行，但是 for 循环外裹着一层 function 的皮，也可以用 return 返回值的 😄

3.怎样让 forEach 停下来呢；try catch

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

4.forEach 在循环的过程中下标是隐形递增 且无法控制的

let arr = [1, 2, 3, 4];
arr.forEach((item, index) => {
  arr.splice(index, 1);
  console.log(1);
})
console.log(arr) // [2, 4]

上图代码打印两次 1

[1, 2, 3, 4].splice(0,1) // [1]
[2, 3, 4].splice(1,1) // [3]

总结： forEach 与 for 有哪些区别呢？

• forEach 没有 break，使用会报错
• forEach 里面 return 无效（没有返回值），如果使用会有类似于 for 循环里面 continue 的效果
• forEach 在循环的过程中无法左右索引（有幕后黑手），但是 for 可以
  有些同学在遍历数组的同时删除某项，需要注意 forEach

---

参考

• js forEach参数详解，forEach与for循环区别，forEach中如何删除数组元素
  
  

所到之处，bug不生， 如有bug，纯属巧合，记得留言曝光这个bug哟😄

本文使用 mdnice 排版