【零基础学JS - 14 】javaScript中的switch语句-Toy模板网

这篇具有很好参考价值的文章主要介绍了【零基础学JS - 14 】javaScript中的switch语句。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

js switch,零基础学JavaScript,javascript,前端,原力计划

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语句的流程图如下：

js switch,零基础学JavaScript,javascript,前端,原力计划

示例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;
}