JavaScript 中如何使用标签跳出多重循环

理解基础区别

在深入多重循环之前，明确 break 和 continue 的单层逻辑差异是关键：break 用于彻底终止当前所在的整个循环体；而 continue 则是跳过本次循环剩余的代码，直接进入下一次迭代。

设置循环标签 (Label)

要让跳出的动作跨越多个层级，必须给相关的循环语句打上“标签”。这类似于 Java 中的标注语法，JS 同样支持此特性。

• 定义方式：在循环语句前放置一个标识符，后跟冒号。
• 示例：

outerLoop: for (let i = 0; i < 5; i++) {
    innerLoop: for (let j = 0; j < 5; j++) {
        // ...内部逻辑
    }
}

这里我们定义了 outerLoop 作为外层循环的出口点，innerLoop 作为内层的辅助出口。

使用 break 配合标签

break labelName 会立刻终止带有该标签的循环及其所有内嵌子循环，程序跳转到标签所对应的循环块之后的第一条语句继续执行。

第1步：跳出最外层循环

当条件满足时，执行 break outerLoop;，无论当前处于多深的嵌套层级，都会直接返回到最外层循环的下方。

var log = [];
outer:
for (var i = 0; i < 10; i++) {
    if (i > 5) {
        console.log('触发 Break Outer', i);
        break outer;
    }
    // 内层循环逻辑被完全忽略
}
console.log('循环结束后的状态');

输出说明：当 i=6 时触发条件，立刻中断了包括其下的所有内层逻辑（如果有的话），i=7,8,9 均不会被处理。

使用 continue 配合标签

continue labelName 则不同，它仅终止带有指定标签的那个循环的当前迭代。对于包含它的内层循环来说，控制权回到内层循环的下一次迭代，但外层的后续迭代也会随之重新开始。

第2步：控制外层循环的下一步迭代

执行 continue outer; 会让当前的内层循环结束，转而立即开始外层循环的下一个 i 值的迭代。

第3步：仅控制内层循环的迭代

如果使用 continue inner;，则只跳过内层循环剩余的步骤，外层循环仍在原地等待内层完成。这是 JS 默认行为，通常不需要显式指定标签。

var count = 0;
outer:
for (var i = 0; i < 4; i++) {
    inner:
    for (var j = 0; j < 4; j++) {
        if (i === 2 && j === 0) {
            console.log('触发 Continue Inner, i:', i, 'j:', j);
            continue outer;
        }
        count++;
    }
}
console.log('总计数:', count); 
// 结果为 10。因为 i=2 时，j=0 触发跳出，内层剩余3次未执行，随后 i=3 正常执行4次。

关键注意事项

• 作用域隔离：标签仅作用于其紧邻的循环语句。你不能将 break whileLoop 放在一个没有对应标签的 for 循环中，否则会报语法错误。
• 语义清晰度：滥用标签可能导致代码难以追踪。在复杂的多重循环中，优先推荐使用 return 将循环封装进函数中，或使用抛出异常的方式作为替代方案，但在纯脚本流控制中，标签依然是一个经典且有效的手段。

以上就是利用 JavaScript 标签跳出多重循环的详细内容，更多关于 JS 高级语法的资料请关注本站其它相关文章！