〖大前端 - 基础入门三大核心之JS篇⑮〗- JavaScript的流程控制语句「switch语句与三元运算符」

• 当前子专栏 基础入门三大核心篇 是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益，文末名片加V！
• 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
• 福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划 加入私域社区。

• 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
• 荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
• 现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能 共赢”推动共建技术人成长共同体。

---

• 🏆 白宝书系列
  • 🏅 Python全栈白宝书
  • 🏅 产品思维训练白宝书
  • 🏅 全域运营实战白宝书
  • 🏅 大前端全栈架构白宝书

---

---

该章节我们来学习 JavaScript的流程控制语句 的另一个知识点，switch语句与三元运算符。

⭐ switch语句

JavaScript中的switch语句是一种条件语句，用于根据不同的条件执行不同的代码块。switch语句通常与break语句一起使用，以避免代码继续执行。

switch语句的语法结构如下：

switch(expression) {
  case value1:
    // code block
    break;
  case value2:
    // code block
    break;
  ...
  default:
    // code block
}

其中，expression是需要进行比较的表达式，value1、value2等是需要比较的值。当expression的值等于value1时，执行第一个代码块；当expression的值等于value2时，执行第二个代码块；以此类推。如果没有任何一个case的值与expression的值相等，则执行default代码块。

在每个case块中，都需要使用break语句来终止switch语句的执行。如果没有break语句，代码将继续执行下一个case块，直到遇到break语句或者执行完所有的case块。

---

🌟 switch语句的使用场景

switch语句也是条件语句

使用场景：当一个变量被分类讨论时用switch语句

先来看一个例子帮助理解switch语句的用途：

案例描述：用户输入1~12中任意一个数字表示月份，然后程序来显示这个月份的天数。

方法一： 用if语句实现。如果用if语句来实现，会出现变量重复的写，代码如下。可以看到month这个变量写了十几次，代码过于冗长。

方法二： 用switch语句实现。代码如下：

switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        alert(month + "月份有31天");
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        alert(month + "月份有30天");
        break;
    case 2:
        alert(month + "月份有30天");
        break;
    default:
        alert("请输入正确的月份");

}

---

🌟 switch语法详解

switch (变量/表达式) {
    case 值1:
    case 值2:
    case 值3:
        //语句块
        break;
    case 值4:
    case 值5:
        //语句块
        break
    default:
        //语句块
}

• switch()的圆括号中一般是一个变量名（可以是表达式，如果是表达式也会自动求值），这个变量将被分类讨论。

• case表示“情况”，它后面没有圆括号，直接跟一个值。程序会依次将case后面的值与switch圆括号中的值进行全等比对，如果比对相同，则执行这条case冒号后面的语句。

• 多条case可以共同用一个语句体

• default表示默认情况。

break 【非常重要】

switch语句并不像if语句那样执行了某一个分支之后会自动跳出if语句体，程序员必须主动调用break来跳出switch语句体。如果不书写break，则后面的所有的case都将被视为匹配，直到遇见break.

下面看一个没有主动调用break的错误例子：

switch语句 相比 if语句 用的较少，但是遇到需要上面这种枚举变量值的情况，switch语句就非常有用了，会比if语句简单很多。一定要学会使用switch语句。

---

⭐ 三元运算符

三元运算符是JavaScript中提供的一种语法形式，可以让我们更方便的实现选择

三元运算符语法：

条件表达式 ? 表达式1: 表达式2

问号前面是判断的条件，问号后面用冒号隔开两个表达式。问号和冒号必须一起出现，可以将条件表达式、问号、表达式1、冒号、表达式2视为一组。

当条件表达式为“真”时，调用表达式1，为“假”时调用表达式2。

三元运算符的用途：

用来根据某个条件是否成立，在两个不同值种选择变量的值

示例代码：

var age = 24;
var type = age >=18 ? '成年人' : '未成年人';
alert(type);  //成年人

可以看到上面没有用到if也没有用到switch，但是依然实现了判断条件及选择。

三元运算符的局限性也很明显：只能在两个分支中选择。

三元运算符在实际开发中是非常常用的语句，一定要熟记、掌握。