【零基础学JS - 14 】javaScript中的switch语句

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

文章目录

• switch语句的语法如下：
• switch语句的流程图如下：
• 示例1：使用switch语句的简单程序
• 示例2：使用switch语句进行类型检查
• 示例3：简单计算器
• 示例4：带有多个case的switch语句

JavaScript switch语句用于进行决策。

switch语句评估一个表达式，并执行与表达式结果相匹配的相应代码块。

switch语句的语法如下：

switch(变量/表达式) {
    case 值1:  
        // case 1的代码块
        break;
 
    case 值2:  
        // case 2的代码块
        break;
 
    case 值N:
        // case N的代码块
        break;
 
    default:
        // default的代码块
}复制

switch语句在括号()内部评估一个变量/表达式。

如果表达式的结果等于值1，则执行值1对应的代码块。
如果表达式的结果等于值2，则执行值2对应的代码块。
这个过程会一直进行下去。如果没有匹配的case，则执行default的代码块。
注意：

break语句是可选的。如果遇到break语句，switch语句就会结束。
如果不使用break语句，匹配的case之后的代码块也会被执行。
default子句也是可选的。

switch语句的流程图如下：

示例1：使用switch语句的简单程序

// 使用switch语句的程序
let a = 2;
 
switch (a) {
 
    case 1:
        a = 'one';
        break;
    case 2:
        a = 'two';
        break;
    default:
        a = 'not found';
        break;
}
console.log(`The value is ${a}`);复制

输出结果：

The value is two.复制

在上面的程序中，表达式a = 2通过switch语句进行评估。

表达式的结果与case 1不匹配，因此继续执行第二个case。在这里，表达式的结果与case 2匹配。所以显示"The value is two"。
break语句终止了代码块的执行，并将程序的控制流跳转到switch块的外部。

示例2：使用switch语句进行类型检查

// 使用switch语句的程序
let a = 1;
 
switch (a) {
    case "1":
        a = 1;
        break;
    case 1:
        a = 'one';
        break;
    case 2:
        a = 'two';
        break;
 
    default:
        a = 'not found';
        break;
}
console.log(`The value is ${a}`);复制

输出结果：

The value is one.复制

在上面的程序中，表达式a = 1通过switch语句进行评估。

在JavaScript中，switch语句严格检查值。因此，表达式的结果与case “1"不匹配。
然后，switch语句继续执行第二个case。在这里，表达式的结果与case 1匹配。所以显示"The value is one”。
break语句终止了代码块的执行，并将程序的控制流跳转到switch块的外部。

注意：在JavaScript中，switch语句严格检查case（应该是相同的数据类型）与表达式的结果。请注意上面的示例中，1与"1"不匹配。

让我们编写一个使用switch语句的简单计算器程序。

示例3：简单计算器

// 简单计算器程序
let result;
 
// 获取操作符输入
const operator = prompt('输入操作符 +, -, * ,/：');
 
// 获取操作数输入
const number1 = parseFloat(prompt('输入第一个数字: '));
const number2 = parseFloat(prompt('输入第二个数字: '));
 
switch(operator) {
    case '+':
        result = number1 + number2;
        console.log(`${number1} + ${number2} = ${result}`);
        break;
    case '-':
        result = number1 - number2;
        console.log(`${number1} - ${number2} = ${result}`);
        break;
    case '*':
        result = number1 * number2;
        console.log(`${number1} * ${number2} = ${result}`);
        break;
    case '/':
        result = number1 / number2;
        console.log(`${number1} / ${number2} = ${result}`);
        break;
 
    default:
        console.log('非法操作符');
        break;
}复制

输出结果：

输入操作符 +, -, * ,/： +
输入第一个数字: 4
输入第二个数字: 5
4 + 5 = 9复制

在上面的程序中，用户被要求输入+、-、*或/，以及两个操作数。然后，switch语句根据用户的输入执行相应的代码块。

JavaScript switch语句中的多个case可以被分组以共享相同的代码。

示例4：带有多个case的switch语句

// 多个case的switch程序
let fruit = 'apple';
switch(fruit) {
    case 'apple':
    case 'mango':
    case 'pineapple':
        console.log(`${fruit} is a fruit.`);
        break;
    default:
        console.log(`${fruit} is not a fruit.`);
        break;
}复制

输出结果：

apple is a fruit.复制

在上面的程序中，多个case被分组。所有分组的case共享相同的代码。

如果fruit变量的值为mango或pineapple，则输出结果将相同。