你可以给 JavaScript 的 `if` 语句加标签

标签是自 JavaScript 创建以来就存在的功能。它们并不新鲜！我认为并没有那么多人了解它们，我甚至认为它们有点令人困惑。但是，正如我们将看到的，标签在非常特定的情况下可能很有用。

但首先：不要将 JavaScript 标签与 HTML 的 <label> 混淆，它们是完全不同的东西！

JavaScript 标签是一种为语句或代码块命名的方法。通常：循环和条件语句。这允许您从内部 break 或 continue 带标签的语句。要将标签应用于语句，请以 label: 开头，您作为“label”输入的内容将成为您稍后可以引用的标签。

以下是标签的基本语法

let x = 0;
// Label a loop as "myLoop"
myLoop:
while (true) {
  if (x >= 10) {
    // This will cause "myLoop" to end.
    break myLoop;
  }
  x++;
}

标签只是对语句的内部引用，不能被查找、导出或存储在值中。它们也不会与变量名冲突，因此如果您真的想让人困惑，您可以让循环和变量具有相同的名称！请不要这样做——未来的您和任何必须阅读您代码的人都会感激不尽。标签的使用案例有限，但在正确的人手中却非常强大。

break 和 continue 的简要介绍

让我们稍微退一步，谈谈 break 和 continue。break 语句将终止当前正在运行的循环或条件语句。它最常用于 switch 语句以结束 case，但它也可用于提前结束 if 语句，或导致 for 或 while 循环结束并停止循环。这是退出条件语句或提前结束循环的好方法。

以下是用法的基本示例break

const x = 1;
switch(x) {
  case 1:
    console.log('On your mark!');
    break; // Doesn't check the rest of the switch statement if 1 is true
  case 2:
    console.log('Get set!');
    break; // Doesn't check the rest of the switch statement if 2 is true
  case 3:
    console.log('GO!');
    break; // Doesn't check the rest of the switch statement if 3 is true
}
// logs: 'On your mark!'

类似地，continue 语句可用于循环以提前结束当前迭代，并开始循环的下一轮运行。但是，这仅在循环内部有效。

以下是continue的使用方法

for (let x = 0; x &< 10; x++) {
  if (x !== 5) continue; // If the number isn't five, go to the next pass of the loop.
  console.log(x);
}
// logs: 5

使用标签与break

通常，标签的使用案例出现在您遇到任何类型的嵌套语句时。将它们与break一起使用可以停止深度嵌套的循环或条件，并使其立即停止。

让我们回到这篇博文标题！

// Our outer if statement
outerIf: 
if (true) {
  // Our inner if statement
  innerIf:
  if (true) {
    break outerIf; // Immediately skips to the end of the outer if statement
  }
  console.log('This never logs!');
}

就是这样，您可以为if语句添加标签。

使用标签与continue

有时我会创建一个嵌套循环，并希望在内部循环中跳过外部循环的一些迭代。我通常会中断内部循环，然后检查我是否处于想要跳过的状态，然后继续外部循环。能够将该代码简化为更易于阅读的语句非常棒！

let x = 0;
outerLoop:
while (x < 10) {
  x++;
  for (let y = 0; y < x; y++) {
    // This will jump back to the top of outerLoop
    if (y === 5) continue outerLoop;
    console.log(x,y);
  }
  console.log('----'); // This will only happen if x < 6
}

块语句和标签

块语句 在 JavaScript 中是一种将 const 和 let 变量的作用域限制到代码一部分的方法。如果您想本地化一些变量而不必创建函数，这可能很有用。这方面的一个（重大）警告是，块语句在 严格模式 中是无效的，而 ES 模块默认就是严格模式。

这是一个带标签的块语句

// This example throws a syntax error in an ES module
const myElement = document.createElement('p');
myConditionalBlock: {
  const myHash = window.location.hash;
  // escape the block if there is not a hash.
  if (!myHash) break myConditionalBlock;
  myElement.innerText = myHash;
}
console.log(myHash); // undefined
document.body.appendChild(myElement);

实际使用

我花了一段时间才想出一个在日常生产代码中使用标签的理由。这可能有点牵强，但在 JavaScript 中标签可能派上用场的地方是从 switch 语句内的循环中提前退出。由于您可以在 switch 中使用 break，因此能够为提前结束循环的循环应用标签可能会使您的代码更有效率。

以下是如何在计算器应用程序中使用它

const calculatorActions = [
  { action: "ADD", amount: 1 },
  { action: "SUB", amount: 5 },
  { action: "EQ" },
  { action: "ADD", amount: 10 }
];
    
let el = {};
let amount = 0;
calculate: while (el) {
  // Remove the first element of the calculatorActions array
  el = calculatorActions.shift();
  switch (el.action) {
    case "ADD":
      amount += el.amount;
      break; // Breaks the switch
    case "SUB":
      amount -= el.amount;
      break; // Breaks the switch
    case "EQ":
      break calculate; // Breaks the loop
    default:
      continue calculate; // If we have an action we don't know, skip it.
  }
}

这样，当条件匹配时，我们可以退出 calculate 循环，而不是让脚本继续执行！

结论

您很少需要使用 JavaScript 标签。事实上，您可以在完全不知道它的情况下过上非常充实的事业。但是，如果您碰巧找到一个可以使用此语法的地方，那么您现在就可以使用它了。