JavaScript break 语句

在 JavaScript 中，break 语句只有 2 个用途：一是用于终止循环语句，二是用于终止 switch 语句。其中，break 语句会立即跳出循环或 switch 语句，并继续执行循环或 switch 语句后面的代码。

JavaScript break 用于终止 “循环语句”

在 JavaScript 中，我们可以使用 break 语句来退出 “本层” 循环（每一层可以包含多次循环）。

注意: break 退出的是 “本层” 循环，而 continue 退出的是 “本次” 循环。

示例 1：break 的基本用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        while (true) {
            alert("我也是醉了");
            break;
        }
    </script>
</body>
</html>

运行结果如下图所示。

JavaScript break的基本用法

说明：

这里的 while 本身是一个死循环，本来应该会不断重复执行 console.log("我也是醉了");。但由于加上了 break。执行一次 alert() 之后，遇到 break 就会直接退出 while 循环。

对于循环中的 break 语句，前面一般有一个 if 判断条件，然后当满足某个条件之后，就会退出循环，请看下面的示例。

示例 2：单层循环使用 break 语句

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const n = 5;
        for (let i = 1; i <= 10; i++){
            if (i === n) {
                break;
            }
            console.log(i);
        }
    </script>
</body>
</html>

运行结果如下。

分析：

i 的取值范围是 1~10（注意不包括 11），所以循环应该执行 10 次才对。但当执行第 5 次循环时，i 的值为 5，此时判断条件 i === n 返回 True，随即执行 break 语句，此时就会直接退出整个循环，并且也不会执行当次循环后面的 console.log(i) 了。

需要注意的是，如果有多层循环（即嵌套循环），那么 break 语句只会退出本层循环，而不是退出所有层的循环，请看下面的例子。

示例 3：多层循环使用 break 语句

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const n = 2;
        for (let i = 1; i <= 3; i++) {
            for (let j = 1; j <= 3; j++) {
                if (i === n) {
                    break;
                }
                console.log(i);
            }
        }
    </script>
</body>
</html>

运行结果如下。

分析：

n 的值为 2，i 和 j 的取值范围都是 1~3（不包括 4），具体分析如下。

当 i=1 时，由于 j 循环了 3 次，并且 i===n 返回 False，并不会执行 break 语句，此时输出为：1、1、1。
当 i=2 时，由于 i===n 返回 True，然后会执行 break 语句，直接退出本层循环，没有任何输出。
当 i=3 时，由于 j 循环了 3 次，并且 i===n 返回 False，并不会执行 break 语句，此时输出为：3、3、3。

JavaScript break 用于终止 “switch 语句”

在 JavaScript 中，break 语句除了可以终止循环语句之外，还可以终止 switch 语句。

示例 4：switch 中使用 break

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const fruit = "苹果";

        switch (fruit) {
            case "苹果":
                console.log("你选择了苹果");
                break;
            case "香蕉":
                console.log("你选择了香蕉");
                break;
            case "西瓜":
                console.log("你选择了西瓜");
                break;
            default:
                console.log("你没有选择任何水果");
        }
    </script>
</body>
</html>

运行结果如下。

你选择了苹果

分析：

switch 语句中的每一个 case 都必须加上 break 语句，这样当遇到符合条件的 case 时，就会执行该 case 并退出 switch 语句。如果不使用 break 语句，会有什么后果呢？我们尝试把上面例子中的所有 break 语句删除，再次运行后的结果如下。

你选择了苹果
你选择了香蕉
你选择了西瓜
你没有选择任何水果

可以看到，如果不使用 break 语句，当遇到符合条件的 case 时，执行完该 case 之后并不会退出 switch 语句，而是继续执行后面所有的 case 以及 default 分支。

JavaScript break 注意事项

在使用 break 语句时，我们需要特别注意以下 2 点。

break 语句只能用于循环语句和 switch 语句，而不能用于其他语句（如 if 语句或函数中）。
如果嵌套了多层循环，那么 break 语句只会退出最内层循环。