《JavaScript 核心原理解析》学习笔记 Day 6 中断与标签 break label

        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 -----