JavaScript中跳出循环的5种方法详解

作者：青柠时间：2026-11-01 02:32:31浏览：140

本文总结了JavaScript中跳出循环的五种常用方法。通过对比return、break、continue、标签化break以及throw语句的执行机制与适用场景，结合具体代码示例，解析了它们在函数返回、异常处理及多层循环控制中的差异，帮助开发者根据实际需求选择最合适的控制流方案。

1、return 语句

首先介绍 return 语句，它仅能在函数内部使用。在函数体中调用 return 会立即终止函数执行并返回结果，从而跳出当前的循环结构。

function myFunction() {
   for (var i = 1; i < 5; i++) {
      if (i === 3) {
         return; // 当i等于3时跳出循环并返回到调用处
      }
      console.log(i);
   }
    console.log('end') // 未执行
}
myFunction();
// 输出结果为：1 2

示例仅输出1和2，当i等于3时，return 语句触发，不仅跳出了循环，还阻止了后续代码（如 console.log('end')）的执行。这体现了 return 的核心特性：一旦执行，函数主体内剩余语句均不再运行。

2、break 语句

使用 break 关键字可以立即终止当前所在的循环。

function myFunction() {
   for (var i = 1; i < 5; i++) {
      if (i === 3) {
         break; // 当i等于3时跳出循环并返回到调用处
      }
      console.log(i);
   }
    console.log('end') // 执行
}
myFunction();
// 输出结果为：1 2 end

通过观察输出结果包含 'end'，可以看出 break 与 return 的区别：break 仅跳出当前循环语句，函数内其他非循环代码仍会继续执行。

3、给循环体增加别名

针对 for 循环，可以设置一个常量或标识符作为循环体的别名，随后使用 break 指定跳出该命名循环。需要注意的是，此方法仅适用于 for 循环，且多层嵌套时每一层都需使用 for 循环并命名。

foo: for (var i = 1; i <= 5; i++) {
    if (i === 3) {
      break foo;
    }
    console.log(i);
  }
// 输出结果为 1 2

该方法同样适用于跳出多层嵌套循环。例如，在数组中查找第一个包含草莓的人。

const arr = [
    { name: '张三', fruit: ['苹果', '香蕉']},
    { name: '李四', fruit: ['梨', '草莓']},
    { name: '王五',  fruit: ['樱桃', '西瓜']},
    { name: '小红', fruit: ['菠萝', '芒果']},
]
let person = undefined

// 为紧邻的for循环命名
冰淇淋: for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].fruit.length; j++) {

        console.log(arr[i].name, arr[i].fruit[j])

        if (arr[i].fruit[j] === '草莓') {
            person = arr[i].name
            
            // 跳出命名的循环
            break 冰淇淋
        }
    }
}
console.log('这里仍然可以执行', person)

// 执行结果如下：
// 张三 苹果
// 张三 香蕉
// 李四 梨
// 李四 草莓
// 这里仍然可以执行 李四

从打印结果可见，命名循环被阻断后，循环体后续的代码（如 console.log('这里仍然可以执行', person)）依然会正常执行。

4、continue 语句

continue 与 break 相似，但区别在于它不会退出整个循环，而是跳过当前迭代，直接进入下一轮循环。

continue 语句只能用于 while、do/while、for（包括 for/of、for/in）循环体内，在其他位置使用会引发语法错误。

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

5、throw 语句

通过 throw 抛出自定义错误对象，触发 try-catch 异常处理机制，从而实现类似跳出循环的效果。

这相当于强制抛出错误以中断执行流程，它不仅终止了循环，还会导致后续代码不再执行（除非被 catch 捕获并处理）。

try {
   for (var i = 0; i < 5; i++) {
      if (i === 3) {
         throw new Error('Jump out of loop'); // 当i等于3时抛出错误
      }
      console.log(i);
   }
} catch (error) {
   console.log(error.message); // 打印错误信息
}
// 输出结果为：0 1 2 Jump out of loop

附：JavaScript中 throw和return有什么区别？

throw 和 return 在 JavaScript 中都可以用于从函数中返回值，但它们之间有一些关键区别：

用途：return 语句用于从函数中返回一个值。当程序执行到 return 语句时，函数会立即终止，并将 return 语句后面的值返回给调用者。throw 语句用于抛出异常。当程序执行到 throw 语句时，程序会立即停止当前执行路径，并尝试查找适当的错误处理程序（如 catch 块）。
错误处理：throw 语句用于表示错误或异常情况。当使用 throw 抛出异常时，你通常需要在调用代码中使用 try...catch 语句来捕获并处理这些异常。而 return 语句只是简单地返回函数的结果，不涉及错误处理。
控制流：throw 语句会改变程序的控制流，使程序跳转到离它最近的错误处理程序（如 catch 块）。如果没有找到合适的错误处理程序，程序会终止执行。而 return 语句仅用于从函数中返回一个值，不会改变程序的控制流。

以下是一个简单的示例，说明 throw 和 return 之间的区别：

function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero"); // 抛出异常，表示错误情况
  }
  return a / b; // 返回除法结果
}

try {
  console.log(divide(10, 2)); // 输出：5
  console.log(divide(10, 0)); // 因为除数为零，将抛出异常
} catch (error) {
  console.error(error.message); // 输出："Division by zero"
}

总之，throw 和 return 在 JavaScript 中都可以用于从函数中返回值，但它们的用途和行为有所不同。throw 用于表示错误或异常情况，改变程序的控制流，并需要使用错误处理程序（如 catch 块）进行捕获和处理。而 return 用于简单地返回函数的结果，不涉及错误处理。

总结

到此这篇关于JS跳出循环的5种方法(return、break、continue、throw等)的文章就介绍到这了,更多相关JS跳出循环方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53