JavaScript Switch 案例 – JS Switch 语句示例

JetDevs是一个真正的帮助开发者的成长平台

在JavaScript中，有时您可以考虑使用switch语句，而不是if else语句。

switch语句可以比复杂的if else语句具有更干净的语法。

看看下面的例子——你可以选择使用更容易阅读的 switch 语句，而不是使用这个长长的 if else 语句。

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}
const pet = "dog";
 
switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

在本文中，我将解释什么是切换语句以及它们的工作原理。我还将帮助您确定它们是否是代码中使用的好选项。

什么是switch陈述？

在编程中，switch语句是一种控制流语句，用于根据多个情况测试expression的值。

这是switch语句的基本语法：

switch (expression) {
  case 1:
   //this code will execute if the case matches the expression
    break;
  case 2:
   //this code will execute if the case matches the expression
    break;
  case 3:
   //this code will execute if the case matches the expression
    break;
  default:
    //this code will execute if none of the cases match the expression
    break;
}

计算机将检查switch语句，并检查case和expression之间是否严格等同===。如果其中一个案例与expression匹配，则该案case句中的代码将执行。

switch (expression) {
  case 1:
   //this code will execute if the case matches the expression
    break;
  case 2:
   //this code will execute if the case matches the expression
    break;
}

如果所有情况都与表达式不匹配，则将执行default子句。

default:
    //this code will execute if none of the cases match the expression
    break;

如果多个案例与switch语句匹配，则将使用与expression匹配的第一个case。

breakcase匹配时，语句将从switch中中断。如果不存在break语句，那么即使找到匹配项，计算机也会继续通过switch语句。

如果switch中存在return语句，那么您不需要break语句。

JavaScript中的switch语句示例

在本例中，我们正在将"oboe"与案例进行比较。"oboe"将与第三个case条款匹配，并将打印到控制台“I play the oboe”。

switch ("oboe") {
  case "trumpet":
    console.log("I play the trumpet");
    break;
  case "flute":
    console.log("I play the flute");
    break;
  case "oboe":
    console.log("I play the oboe");
    break;
  default:
    console.log("I don't play an instrument. Sorry");
    break;
}

如果我将表达式更改为"no instrument"那么default子句将执行，打印到控制台的消息将是“I don't play an instrument. Sorry”

switch ("no instrument") {
  case "trumpet":
    console.log("I play the trumpet");
    break;
  case "flute":
    console.log("I play the flute");
    break;
  case "oboe":
    console.log("I play the oboe");
    break;
  default:
    console.log("I don't play an instrument. Sorry");
    break;
}

缺少break语句

在本例中，匹配将是case2。但如果没有break语句，计算机将继续进入case3和default子句。

你应该看到三个 console.log 语句，因为break 语句没有被包含在内。

switch (2) {
  case 1:
    console.log("Number 1 was chosen");
  case 2:
    console.log("Number 2 was chosen");
  case 3:
    console.log("Number 3 was chosen");
  default:
    console.log("No number was chosen");
}

默认条款的位置

标准惯例是将default作为最后条款。但您也可以将它置于其他案例之前。

const food = "nuts";

switch (food) {
  case "cake":
    console.log("I like cake");
    break;
  case "pizza":
    console.log("I like pizza");
    break;
  default:
    console.log("I like all foods");
    break;
  case "ice cream":
    console.log("I like ice cream");
    break;
}

电脑仍会检查每个案例并找到匹配项。由于可变food与任何情况都不匹配，因此将执行default情况。

一次操作的多个案例

有时，您可能会有一个操作，对多个案例来说是相同的。

我们可以省略break语句，并在一组案例后放置一个单一操作，而不是为每个案例写出相同的 console.log。

语句 "This country is in Europe." 将被打印在控制台，如果 country 匹配下列任一个单词 "France", "Spain", "Ireland" or "Poland".

const country = "Ireland";
switch (country) {
  case "France":
  case "Spain":
  case "Ireland":
  case "Poland":
    console.log("This country is in Europe.");
    break;
  case "United States":
  default:
    console.log("This country is not in Europe.");
}

阻止范围和switch语句

此示例将产生错误消息，因为message变量已声明，并且您不能在同一块范围内拥有相同的变量名称。

const errand = "Going Shopping";
switch (errand) {
  case "Going to the Dentist":
    let message = "I hate going to the dentist";
    console.log(message);
    break;
  case "Going Shopping":
    let message = "I love to shop";
    console.log(message);
    break;
  default:
    console.log("No errands");
    break;
}

为了消除错误消息，需要将案例包裹在一组花括号中。

const errand = "Going Shopping";
switch (errand) {
  case "Going to the Dentist": {
    let message = "I hate going to the dentist";
    console.log(message);
    break;
  }
  case "Going Shopping": {
    let message = "I love to shop";
    console.log(message);
    break;
  }
  default: {
    console.log("No errand");
    break;
  }
}

总结

使用switch语句可以替代if else语句。switch语句将expression的值与多个情况进行比较。

switch声明将检查严格平等。在这个例子中，自"2"!== 2，default子句将执行。

switch (2) {
  case "2":
    console.log("Number 2 in a string");
    break;
  case "3":
    console.log("Number 3 in a string");
    break;
  default:
    console.log("Number not present");
    break;
}

breakcase匹配时，语句将从switch中中断。如果不存在break语句，那么即使找到匹配项，计算机也会继续通过switch语句。

*关注公众号填写问卷赢大奖*JetDevs上线好礼送不停

我们即将上线一个新的App，集社交、学习、找工作于一体的开发者生态社区

想要了解大家在开发中遇到的问题，邀您完成JetDevs开发者问卷

http://survey.jetdevs.com/?c=ZH10

此次问卷完成后更有幸运大抽奖活动哦！

参与必中~（最低1元）！

【JetDevs】

关注我们,了解更多关于开发者的相关资讯与100000开发者共同成长

编辑于 2022-02-10 13:51

JavaScript

前端开发