如何跳出循环？

[lizhongzhen11]

起因

记得一周前一朋友跟我说forEach没法跳出循环，我当时没怎么在意这个问题，但是留了个心眼，等有机会去研究下。然后昨晚快下班的时候，一同事跑过来问我如何跳出forEach，我立马想到了之前朋友所说的问题，可是因为下班了且时间比较晚，所以劝他先用普通for循环，等到今天早上我在研究下。当我初步尝试时就发现我这js基础还是问题很大啊！

场景

同事做的项目会涉及到大量数据，他需要把数据拿过来然后判断是不是都符合某个条件，如果都符合才能进行下一步操作，一旦出现不符合的数据就要终止整个循环，也不应该进行下面的操作了，所以在这种场景下，跳出循环显得十分必要，都发现有不符合的了下面也没有操作的需要啦，这样一定程度能优化页面加载。

为什么一开始用forEach呢？

因为写代码要骚。哈哈哈哈哈~

如果是普通for循环，如何做呢？(我js基础遭受打击了)

1.想当然的用return啊，结果：呵呵！

for (let i = 0; i < 3; i++) {
  console.log(110);
  if (i === 1) {
   return
  }
}

这段代码，我想当然的认为：i === 1时遇到return跳出循环，只会打印两次110，但是当我在控制台按下回车时，啪啪啪打脸啊，脸都打肿了，我还不知道为啥！直接报:Illegal return statement
excuse me? why? why treat me like this???(尼克扬的黑人问号脸脑补下！)

出问题了，那只能去百度或谷歌了。。。

一开始搜索 如何跳出js的for循环？

然后在 https://blog.csdn.net/fxss5201/article/details/52980138 找到了答案！

return语句就是用于指定函数返回的值。return语句只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误！

竟然还有这种限制，为何我以前怎么没发觉，仔细看了下以前的代码，貌似，我的for都是写在函数内的，所以没报错。。。

当然，为了保险点，又去MDN看了下return，果不其然，MDN上抬头就是一句：return语句终止函数的执行，并返回一个指定的值给函数调用者。

更保险的可以看ECMAScript® 2015 Language Specification return。规范里面也说了返回语句使函数停止执行，并将值返回给调用方。

2.既然return不是为for服务的，那么该怎么去跳出for循环呢？

想必基础牢固的同学们立马就能说出break和continute这两兄弟。不过我这种基础不扎实的学渣只能去百度以及看MDN和规范了，直接在MDN上找for，可能MDN觉得这种东西太简单了，直接用了示例就告诉我们break能跳出循环。

这里顺便带上ECMA规范里的for。

MDN上关于break的说明：break 语句中止当前循环，switch语句或label 语句，并把程序控制流转到紧接着被中止语句后面的语句。break可不仅仅是跳出循环这么简单哦~

一样的，顺带附上规范里的break。

for (let j = 0; j < 3; j++) {
  console.log(112);
  if (j === 1) {
    break;
  }
}

3.我在搜索的过程中，发现网上经常同时拿break和continue举例，用法大家肯定都很熟悉。试一下就知道了。

for (let j = 0; j < 3; j++) {
  if (j === 1) {
    continue;
  }
  console.log(j);
}

continue会跳出符合条件的当次循环，但是会继续执行接下来不符合条件的循环，说的有点绕了，大家结合代码自行理解。附上MDN continue以及规范中的continue。

以上就是关于跳出普通for循环的知识了，那么，接下来我得去看看为什么不能跳出forEach？

为什么不能跳出forEach？

1.先用break和continue分别测试一波，看看问题是否成立。

arr.forEach(function(item){
  if (item === 2) {
    break;
  }
  console.log(item);
})
arr.forEach(function(item){
  console.log(110)
  if (item === 2) {
    continue;
  }
  console.log(item);
})

控制台均报语法错误！！！尤其continue提示没有包含在一个迭代语句中！！！

why???

去看看MDN上面的forEach，其中明确提到：

没有办法中止或者跳出 forEach 循环，除了抛出一个异常。如果你需要这样，使用forEach()方法是错误的，你可以用一个简单的循环作为替代。如果您正在测试一个数组里的元素是否符合某条件，且需要返回一个布尔值，那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。

同时，去看看规范里的forEach。貌似没有说为什么。那么怎么办呢？

回顾continue报错提示，需要被包含在迭代语句内，难道forEach不是迭代语句吗？它作用不就是遍历吗？抱着这些问题，我在规范的目录里走马观花的查看，突然发现这个Iteration Statements，这个目录名不就是continue要求的迭代语句嘛。

我点了下去，大致看了下，果然没有forEach，而且map，filter等都没有。。。

我有尝试去看v8关于forEach的源码实现，可惜并没有找到。。。

不过这里可以提供一个仿map方法的_map，本质上是一样的，只是侧重点不同，有些实现不同。我们平常这样使用：arr.forEach(function(){})，我们都是在function(){}中去做我们需要的操作，但是，forEach本质上就是一个函数，而我们写的函数其实是传递给它调用的回调函数！！！

所以，当我在回调函数内写了return，即使符合条件也只是跳出回调函数而已，并没有跳出调用它的forEach！

不理解的话看个简单例子，比较直观：

function a(i) {
  console.log(i);
  if(i === 1) {
    return
  }
}
function b(arr) {
  for(var i = 0; i < arr.length; i++) {
    a(i)
  }
}
var arr = [1,2,3,4,5]
b(arr)

当i === 1时，并没有跳出函数b！

总结下

由这一个小问题挖掘出这么多小知识也是不错的，有利于夯实js基础。以后遇到类似的业务场景时，该用普通for就用普通for吧，不要老想着骚操作。当然，如果一定要骚一把，可以抛异常：

let arr = [1, 2, 3]
arr.forEach(function(item){
  console.log(110)
  if (item === 2) {
    throw Object.create({'error': '不符合'})
  }
  console.log(item);
})

[pro-xiaoy]

写的好好呀，受益匪浅

[lizhongzhen11]

@pro-xiaoy
。。。别吹我，你有什么学到的很有用的常分享，我记下来或者你写下来。
向高级大步前进！