MarukoAnn

V1

2022/07/31阅读:8主题:萌绿

javascript中你不知道的if 标签

javascript中你不知道的if 标签

标签是自 JavaScript 创建以来就存在的功能。他们不是新的!我不认为很多人都知道他们,我什至认为他们有点令人困惑。但是,正如我们将看到的,标签在非常具体的情况下很有用。

但首先:不应将 JavaScript 标签与 HTML 混淆

JavaScript 标签是一种命名语句或代码块的方法。通常:循环和条件语句。这允许您break或continue从内部标记的语句。要将标签应用于语句,请以语句开头,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

让我们后退一点,先谈谈breakand continue。语句将break终止当前运行的循环或条件语句。它最常用于switch结束 a 的语句case,但它也可以用于提前结束if语句,或者也可以使 a fororwhile循环结束并停止循环。这是退出条件语句或提前结束循环的好方法。 这是一个基本的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; ////如果数字不是 5,则转到循环的下一轮。
  console.log(x);
}
// logs: 5

使用标签break

通常,当您进入任何类型的嵌套语句时,就会出现标签的用例。使用它们break可以停止深层嵌套循环或条件并使其立即停。

outerIf: 
if (true) {
  // 我们的内部 if 语句
  innerIf:
  if (true) {
    break outerIf; // 立即跳到外部 if 语句的末尾
  }
  console.log("这不记录");
}

有了它,你可以标记一个if声明。

使用标签continue

有时我做了一个嵌套循环,并想在内循环内部跳过外循环的一些迭代。我通常会打破内循环,然后检查我是否处于想要跳过的状态,然后继续外循环。能够将代码简化为更易于阅读的语句真是太棒了!

let x = 0;
outerLoop:
while (x < 10) {
  x++;
  for (let y = 0; y < x; y++) {
    // 这将跳回到outerLoop的顶部
    if (y === 5) continue outerLoop;
    console.log(x,y);
  }
  console.log('----'); // 只有当 x < 6 时才会发生
}

块语句和标签

JavaScript 中的块语句是一种将变量const和let变量范围限定为代码的一部分的方法。如果您想在不创建函数的情况下本地化某些变量,这将很有用。对此的(大)警告是块语句在严格模式下是无效的,这是 ES 模块默认的。

这是一个带标签的块语句:

// 此示例在 ES 模块中引发语法错误
const myElement = document.createElement('p');
myConditionalBlock: {
  const myHash = window.location.hash;
  // 如果没有散列,则转义该块。
  if (!myHash) break myConditionalBlock;
  myElement.innerText = myHash;
}
console.log(myHash); // undefined
document.body.appendChild(myElement);

现实世界的使用

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

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

  const calculatorActions = [
  { action: "ADD", amount: 1 },
  { action: "SUB", amount: 5 },
  { action: "EQ" },
  { action: "ADD", amount: 10 }
];
    
let el = {};
let amount = 0;
calculate: while (el) {
  // 删除calculatorActions 数组的第一个元素
  el = calculatorActions.shift();
  switch (el.action) {
    case "ADD":
      amount += el.amount;
      break; // 跳出 switch
    case "SUB":
      amount -= el.amount;
      break; //  跳出 switch
    case "EQ":
      break calculate; // 跳出循环
    default:
      continue calculate; // 如果我们有不知道的动作,请跳过它
  }
}

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

结论

您很少需要使用 JavaScript 标签。事实上,你可以在不知道这存在的情况下领导一个非常充实的职业生涯。但是,如果您偶然发现这种语法有帮助的地方,您现在可以使用它。

分类:

前端

标签:

JavaScript

作者介绍

MarukoAnn
V1