JavaScript 中的 break 可中断循环语句和 switch 语句,其效果是跳转到下一语句。而带标签的 break label 可用在被 label 标记的块语句中。并且对于 if / else if / else 语句和 try / catch / finally 语句而言,其每一个块中都可以使用标记到 if 或 try 的 break label。具体见如下代码:
// 在 if / else if / else 语句中使用 break
// 标签 label 只能加在 if 前,若加在 else if 或 else 前会报错
labelA: if(false){
console.log('if')
}
else if(true){
console.log('else if')
break labelA
console.log('after break')
}
else{
console.log('else')
}
// break 中断了 else if 块语句
// else if
// 在 try / catch / finally 语句中使用 break 也是同样
// 标签 label 只能加在 try 前,若加在 catch 或 finally 前会报错
// 以下 break 使用在 try 块语句中
labelB: try{
console.log('try')
break labelB
console.log('after break')
}
catch{
console.log('catch')
}
finally{
console.log('finally')
}
// break 中断了 try 块语句,但不影响 finally 块语句的执行
// try
// finally
// 以下 break 使用在 catch 块语句中
labelC: try{
console.log('try')
throw(new Error())
}
catch{
console.log('catch')
break labelC
console.log('after break')
}
finally{
console.log('finally')
}
// break 中断了 catch 块语句,但不影响 finally 块语句的执行
// try
// catch
// finally
// 以下 break 使用在 finally 块语句中
labelD: try{
console.log('try')
throw(new Error())
}
catch{
console.log('catch')
}
finally{
console.log('finally')
break labelD
console.log('after break')
}
// break 中断了 finally 块语句
// try
// catch
// finally
另外,在函数内的 try / catch / finally 语句中使用 break 时,其会在函数 return 结果前执行,可能造成 return 语句中的表达式已执行,但 return 被打断的情况。具体见代码如下:
// 无 break 时
var i=0
function f1() {
try {
console.log('try')
return i++ // 表达式 i++ 被运行,并且 return 0
}
finally {
console.log('finally')
}
console.log('after')
return i
}
// 调用函数 f1
f1() // 函数返回值为 0,且是在 finally 运行结束后返回
// try
// finally
// 打印完后,此处返回函数运行结果
i // 此时变量 i 值为 1,因为表达式 i++ 的运行
// 在 try 中 break
var i=0
function f2() {
labelA: try {
console.log('try')
break labelA
console.log('after break')
return i++ // 表达式 i++ 未被运行
}
finally {
console.log('finally')
}
console.log('after')
return i // 此处 return 0
}
// 调用函数 f2
f2() // 函数返回值为 0
// try
// finally
// after
i // 此时变量 i 值为 0,因为表达式 i++ 未被运行
// 在 finally 中 break
var i=0
function f3() {
labelA: try {
console.log('try')
return i++ // 表达式 i++ 被运行,但未在此处 return
}
finally {
console.log('finally')
// 若在此处打印变量 i,则其值为 1,因为表达式 i++ 已被运行
// console.loh(i)
break labelA
console.log('after break')
}
console.log('after')
return i // 此处return 1
}
// 调用函数 f3
f3() // 函数返回值为 1,因为表达式 i++ 被运行但未直接 return 该表达式结果,之后 return i 时,i 的值已增加
// try
// finally
// after
i // 此时变量 i 值为 1,因为表达式 i++ 的运行
参考:break - JavaScript | MDN (mozilla.org)
----- 极客时间《JavaScript 核心原理解析》学习笔记 Day 6 -----