js跳出循环的三种方法(break, return, continue)

今天总结一下js种跳出循环的方法(return, break, continue)，并分别介绍一下用法、特点和区别。

1、return语句

首先来说return语句，return不止能用来跳出循环，一般常用在函数内部，来停止函数执行，并返回一个东西，今天只介绍他在跳出循环时的用法。

for (var i = 1; i <= 5; i++) {
  if (i === 3) {
    return;
  }
  console.log(i);   // Uncaught SyntaxError: Illegal return statement
  // 这里会报错，是因为在js中return语句只能放在function中，如果不是在一个function中则弹出如上错误
}

我们把return语句放到函数中来使用就行了，看下面代码：

function fn () {
  for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      return false;
    }
    console.log(i); // 分别输出  1，2
  }
  console.log('end'); // 未执行
}
fn();

这里大家可以看到，只输出了1和2，第三次循环中return跳出了循环，同时也阻止了后面代码的执行，这就是return的特性：当执行return语句时，即使函数主体中还有其他语句，函数执行也会停止！

2、break语句

break语句只有在循环语句和switch语句中使用才是合法的，经常用来跳出循环。下面时简单的例子：

function fn() {
  for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      break;
    }
    console.log(i); // 分别输出  1，2
  }
  console.log('end'); // end
}
fn()

通过输出了end可以看出他跟return语句的不同之处，break语句只是跳出了当前循环语句，并不会阻止函数内其他语句的执行。

3、continue语句

continue语句和break语句相似。所不同的是，它不是退出一个循环，而是跳出当前循环，进行下一轮循环。continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内, 在其他地方使用都会引起错误。

function fn() {
  for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      continue;
    }
    console.log(i); // 分别输出  1，2，4，5
  }
  console.log('end'); // end
}
fn()

通过上面代码能直观的看出，continue语句它不是退出一个循环，而是跳出当前循环，进行下一轮循环。

说到这儿就能看出来这三个跳出循环的方法的不同之处了，知道各自的特点和区别，就能合理的在项目中使用了。