JS跳出循环的5种方法总结(return、break、continue、throw等)

来自:网络
时间:2024-06-10
阅读:

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,第三次循环中return跳出了循环,同时也阻止了后面代码的执行,这就是return的特性:当执行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 可以看出他跟 return 语句的不同之处,break 语句只是跳出了当前循环语句,并不会阻止函数内其他语句的执行

3、 给循环体增加别名

首先我们针对 for 循环设置一个常量表示循环体,然后 break 指定跳出循环体。(tips:指定的循环体可以是英文也可以是中文,只适用于 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)

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

看打印的结果,不仅阻断了命名循环的执行,而且执行命名循环后续的代码

4、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 机制进行异常处理,达到类似跳出循环的效果。

相当于强制抛错中断执行,不仅终止了循环,后续代码也不再执行。

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 用于简单地返回函数的结果,不涉及错误处理。

总结 

返回顶部
顶部