【零基础学JS - 13 】javaScript中的break,continue语句

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

JavaScript break语句

当遇到break语句时，它会立即终止循环。

break语句的语法是：

break [label];
注意：label是可选的，很少使用。

工作原理

带有for循环的break

// 打印i的值的程序
for (let i = 1; i <= 5; i++) {
    // break条件     
    if (i == 3) {
        break;
    }
    console.log(i);
}

运行代码,输出

1
2

在上面的程序中，for循环用于在每次迭代中打印i的值。使用break语句如下：

if(i == 3) {
    break;
}

这意味着当i等于3时，break语句终止循环。因此，输出不包括大于或等于3的值。

带有while循环的break

// 找到正数的和的程序
// 如果用户输入负数，break结束循环
// 输入的负数不会被添加到总和中

let sum = 0, number;

while(true) {// 如果数字为正数，则重新输入
    number = parseInt(prompt('输入一个数字：'));

    // break条件
    if(number < 0) {
        break;
    }

    // 添加所有正数
    sum += number;
}

// 显示总和
console.log(`总和为${sum}。`);

运行代码,输出

输入一个数字：1
输入一个数字：2
输入一个数字：3
输入一个数字：-5
总和为6。

在上面的程序中，用户输入一个数字。使用while循环打印用户输入数字的总和。

这里使用break语句如下：

if(number < 0) {
    break;
}

当用户输入一个负数（例如-5）时，break语句终止循环，并且程序的控制流程移出循环。

因此，while循环会继续，直到用户输入一个负数。

带有嵌套循环的break

当在两个嵌套循环中使用break时，break会终止内部循环。例如，

// 嵌套的for循环

// 第一个循环
for (let i = 1; i <= 3; i++) {// 第二个循环
    for (let j = 1; j <= 3; j++) {
        if (i == 2) {
          break;
        }
        console.log(`i = ${i}, j = ${j}`);
    }
}

运行代码,输出

i = 1, j = 1
i = 1, j = 2
i = 1, j = 3
i = 3, j = 1
i = 3, j = 2
i = 3, j = 3

在上面的程序中，当i等于2时，break语句执行。它终止了内部循环，并且程序的控制流程移动到外部循环。

因此，i = 2的值从输出中永远不会输出出来。

JavaScript continue 语句

continue 语句用于跳过当前循环的迭代，并将程序的控制流转到下一次迭代。

continue 语句的语法如下：

continue [label];

注意：label 是可选的，很少使用。

JavaScript continue 语句的工作原理

在 for 循环中使用 continue

在 for 循环中，continue 跳过当前迭代，控制流跳转到 update（例如下例子的i++）。

示例 1：打印 i 的值

for (let i = 1; i <= 5; i++) {

    // condition to continue    
    if (i == 3) {
        continue;
    }

    console.log(i);
}

输出结果：

1
2
4
5

在上面的程序中，使用 for 循环打印每次迭代中 i 的值。

注意循环内部的 continue 语句。

if(i == 3) {
    continue;
}

这意味着：

当 i 等于 3 时，continue 语句跳过第三次迭代。
然后，i 变为 4，再次评估测试条件和 continue 语句。
因此，下面的两次迭代打印出了 4 和 5。

注意：break 语句完全终止循环。然而，continue 语句只是跳过当前迭代。

在 while 循环中使用 continue

在 while 循环中，continue 跳过当前迭代，程序的控制流返回到 while 条件。

continue 语句在 while 和 do…while 循环中的工作方式相同。

示例 2：计算正数

// 仅计算正数的程序
// 如果用户输入负数，则跳过该数字的计算

let sum = 0;
let number = 0;

while (number >= 0) {

    // 添加所有正数
    sum += number;

    // 从用户处获取输入
    number = parseInt(prompt('请输入一个数字：'));

    // 继续条件
    if (isNaN(number)) {
        console.log('你输入了一个字符串。');
        number = 0; // 将number的值重新设为0
        continue;
    }

}

// 显示总和
console.log(`总和为 ${sum}。`);

输出

请输入一个数字：1
请输入一个数字：2
请输入一个数字：hello
你输入了一个字符串。
请输入一个数字：5
请输入一个数字：-2
总和为 8。

在上面的程序中，用户输入一个数字。使用while循环打印用户输入的所有正数的总和。

注意使用了continue语句。

if (isNaN(number)) {
    continue;
}

当用户输入一个非数值的字符串时，continue语句会跳过当前迭代。然后程序的控制流转到while循环的条件。

当用户输入一个小于0的数字时，循环终止。

在嵌套循环中使用 continue

当 continue 语句在两个嵌套循环中使用时，它会跳过内部循环的当前迭代。例如，

for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        if (j == 2) {
          continue;
        }
        console.log(`i = ${i}, j = ${j}`);
    }
}

输出结果：

i = 1, j = 1
i = 1, j = 3
i = 2, j = 1
i = 2, j = 3
i = 3, j = 1
i = 3, j = 3

在上面的程序中，当 continue 语句执行时，它会跳过内部循环的当前迭代，程序的控制流转到内部循环的 update。

因此，j = 2 的值在输出中永远不会显示。

JavaScript 标记 continue

在使用嵌套循环时，可以跳过当前迭代，并将程序的控制流传递给标记语句的 updateExpression。

但是，在 JavaScript 中很少使用标记 continue，因为这会使代码更难阅读和理解。

如果你想要了解有关标记 continue 语句的更多信息，请访问标记 continue。