JavaScript 跳出循环的三种方法：break、return 与 continue

作者：闭包旅人时间：2026-10-23 10:01:16浏览：663

本文深入解析 JavaScript 中跳出循环的三种核心方式：break、continue 和 return。详细阐述 break 用于立即终止最内层循环，continue 用于跳过当前迭代进入下一次循环，以及 return 在函数内部终止执行并返回值的机制。通过具体代码示例对比三者在不同场景下的行为差异，并探讨严格模式下 this 指向对 return 语句的影响，帮助开发者准确掌握循环控制逻辑。

前言

一位前端界的大神让我去思考的一个问题，给了 Big-man 一段代码，如下：


function Seriously(options) {
  // if called without 'new', make a new object and return that
  if(window === this || !(this instanceof Seriously) || this.id !== undefined) {
    return new Seriously(options);
  }
}

return 语句执行之后还会继续执行吗？这是大神上来让我解决的问题，既然提到了 return 那我也就随带解决 JS 中另外的两种结束循环的方法 break、continue。

Break 语句

break 语句会使运行的程序立刻退出包含在最内层的循环或者退出一个 switch 语句。
由于它是用来退出循环或者 switch 语句的，所以只有当它出现在这些语句的时候，这种形式的 break 语句才是合法的。
如果一个循环的终止条件非常复杂，那么使用 break 语句来实现某些条件比用一个循环表达式所有的条件容易得多。


for(var i = 519; i < 550; i++) {
  if(i == 522) {
    break;
  }
  console.log(i);
  alert(i);
  document.write(i);
}

当 i = 521 的时候，直接退出 for 这个循环。这个循环将不再被执行。
对于输出结果的话，可以自己去测试的吧。

Continue 语句

continue 语句和 break 语句相似。所不同的是，它不是退出一个循环，而是开始循环的一次新迭代。
continue 语句只能用在 while 语句、do/while 语句、for 语句、或者 for/in 语句的循环体内，在其他地方使用都会引起错误？


for(var i = 5; i >=0; i--) {
  if(i == 4 || i == 3 || i == 1) {
    continue;
  }
  console.log(i);
  alert(i);
  document.write(i);
}

当 i = 4、i = 3 以及 i = 1 的时候，直接跳出 for 循环。下次继续执行。
至于输出结果，还希望大家去打印一下。

Return 语句

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


for(var i = 1; i < 10; i++) {
  if(i == 8) {
    return;
  }
  console.log(i);
  alert(i);
  document.write(i);
}

执行结果 Uncaught SyntaxError: illegal return statement(...)

错误意思是非法捕获的查询返回语句。

当执行 return 语句时，即使函数主题中还有其他语句，函数执行也会停止！


<script type="text/javascript">
  if(username == "") {
    alert("please input your username: ");
    return false;
  } else if (qq == "") {
    alert("please input your qq number: ");
    return false;
  }
</script>

上面的实例里，当 username 为空时，就不会再向下执行，在一些表单提交中，也可以通过 return false 来阻止默认的提交方式，改用 Ajax 的提交方式，例如：


<form id="form" onSubmit="return false">
...
</form>

this 对应的全局变量

window == this 这个 Boolean 等式，在不同的情况下的展现都不一样的。


<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
  function a() {
    console.log(window === this)
  }
  a();
</script>
</body>
</html>

这个时候的 window === this 打印出来的是 true，这也就意味着 this 绝对等于 window。


<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
  'use strict'
  function a() {
    console.log(window === this)
  }
  a();
</script>
</body>
</html>

这个时候 window === this 返回回来的值却是 false，而且打印出来的 this 是 undefined 的。

所以严格模式下面的代码操作需要更加的规范和合理才可以的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

什么时候该用JS构造器：与工厂模式、字面量的选择对比

2026-11-05 16:18:22

推荐几款轻量级JS照片墙开源库及对比

2026-11-05 15:56:19

JavaScript递归写法有哪些常见陷阱及避免方法

2026-11-05 14:53:38

JS数组浅拷贝与深拷贝怎么选？场景与方法总结

2026-11-05 14:41:02

p5.js 中 setup() 和 draw() 函数的执行机制详解

2026-11-05 12:32:38