文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

掌握 JavaScript switch 语句

2024-11-30 15:32

关注

switch 语句评估给定的表达式,它可以是变量或值,并将其与几种可能的情况进行比较。 

如果表达式的值与其中一种情况匹配,则执行关联的代码块(一组指令)。 如果未找到匹配项,则可以执行可选的默认情况作为回退,这意味着它会在其他情况都不适用时运行。

例如,这是一个简单的 switch 语句,它检查名为 day 的变量的值:

switch (day) {
case "Monday":
console.log("Start of the work week! 😴");
break;
case "Friday":
console.log("End of the work week! 🥳");
break;
default:
console.log("A regular day");
}

通过掌握 switch 语句,您可以编写更干净、更高效、组织更好的 JavaScript 代码,最终提高您的整体编程技能。

switch 语句基础:剖析和结构

switch 语句以关键字 switch 开头,后跟括号中的表达式。 该表达式与包含在开关块中的一系列 case 标签进行比较。 

每个 case 标签代表一个不同的值,当表达式与 case 标签的值匹配时,将执行 case 后面的代码块。 

break 语句通常用于在执行匹配案例后退出 switch 块,以确保仅运行预期的代码块,并防止跳转到下一个案例。 

可选地,可以包含默认案例以在没有案例标签匹配表达式时提供回退操作,确保对未知值的响应。

switch(expression) {
case {value1}:
// <-- Your Code to execute -->
break // optional
case {value2}:
// <-- Your Code to execute -->
break // optional
default: // optional
// <-- Code that executes when no values match-->
}


const superhero = 'Spider-Man';
switch (superhero) {
case 'Batman':
console.log('🦇 The Dark Knight!');
break;
case 'Wonder Woman':
console.log('👸 The Amazon Princess!');
break;
default:
console.log('💥 There are so many amazing superheroes!');
}

switch 与 if-else

当您有多个条件要处理时,switch 语句是比较好的处理方式,是使用多个 if-else 语句的替代方法。 

if-else 语句适用于检查一系列可以表示为 true 或 false 的条件,而 switch 语句在处理可以采用多个不同值的单个表达式时效率更高。 

从本质上讲,当您有多个相关条件需要管理时,switch 语句可以使您的代码更清晰、更有条理且更易于阅读。

例如,考虑以下 if-else 结构:

if (color === "red") {
console.log("The color is red 🟥");
} else if (color === "blue") {
console.log("The color is blue 🟦");
} else if (color === "green") {
console.log("The color is green 🟩");
} else {
console.log("Unknown color 🌈");
}

等效的 switch 语句如下所示:

switch (color) {
case "red":
console.log("The color is red 🟥");
break;
case "blue":
console.log("The color is blue 🟦");
break;
case "green":
console.log("The color is green 🟩");
break;
default:
console.log("Unknown color 🌈");
}

switch 语句提供了一种更有组织性和可读性的方式来处理多种情况,尤其是在处理大量情况时。 

在 switch 语句中,被计算的表达式是括号内的变量或值(在本例中为变量 color)。

何时使用 switch 与if-else

大量单变量条件:当您有大量条件要处理时,switch 语句通常比 if-else 链更有条理且更易于阅读。

单变量评估:如果您正在评估的条件基于具有多个不同值的单个变量或表达式,则 switch 语句可以提供比 if-else 模式更高效、更简洁的解决方案。

更快的代码执行:在某些情况下,JavaScript 引擎可以优化 switch 语句,与一系列 if-else 语句相比,可以更快地执行代码。

更容易维护:Switch 语句使添加、删除或修改案例变得更容易,因为每个案例都独立于 switch 块中。 相比之下,if-else 链在需要更改时可能需要进行更广泛的修改。

默认回退:Switch 语句提供了一个可选的默认情况,可以在没有其他情况与给定表达式匹配时执行。 此功能允许以一种干净的方式来处理意外或未知的值。

何时使用 if-else over switch

复杂条件:如果您正在评估的条件涉及复杂逻辑、多个变量或关系和逻辑运算符,则 if-else 模式提供了更大的灵活性,并且比 switch 语句更适合这些情况。

基于范围的条件:当您需要检查不是离散的值或条件的范围时,if-else 模式提供了更好的解决方案,因为 switch 语句专为比较离散值而设计。

少量条件:如果您只有几个简单的条件要检查,使用 if-else 模式比 switch 语句更直接、更容易编写。

非常量情况:Switch 语句需要情况标签的常量值,这意味着它们不能是在运行时更改的表达式。 如果您需要评估具有非常量值的条件,则 if-else 模式是合适的选择。

评估真值或假值:当您需要检查一个值是真值还是假值时,If-else 模式是合适的。Switch 语句不是为这种类型的评估而设计的,需要更冗长的代码才能实现相同的结果。

提前退出条件:如果您有提前退出条件,一旦满足某个条件就不需要进一步评估,if-else 模式会更有效。 使用 switch 语句,所有情况都会被评估,即使找到了早期匹配项(除非您使用“break”语句)。

决定 switch 或 if-else

switch 和 if-else 都解决了类似的问题,并且根据您的用例各有优缺点。 为了帮助您做出决定,我创建了一个简单的 switch 语句:

switch (yourUseCase) {
case 'large_number_of_conditions':
case 'single_variable_evaluation':
case 'multiple_discrete_values':
console.log('Consider using a switch statement.');
break;
case 'complex_conditions':
case 'range_based_conditions':
case 'non_constant_cases':
console.log('Consider using an if-else pattern.');
break;
default:
console.log('Choose the most appropriate control structure based on your specific use case.');
}

switch 语句功能和技术:

switch 语句提供了额外的功能和概念,可用于提高代码的性能、可读性和简洁性。

默认情况

当没有其他情况与提供的表达式匹配时,将执行 switch 语句中的默认情况。 它作为处理意外值或未知值的回退,确保即使没有匹配的情况也能提供响应。

const beverage = 'lemonade';


switch (beverage) {
case 'coffee':
console.log('☕️ Enjoy your coffee!');
break;
case 'tea':
console.log('🍵 Have a relaxing cup of tea!');
break;
default:
console.log('🥤 Your choice of drink is not listed, but cheers anyway!');
}

break关键字

break 关键字用在 switch 语句中,一旦找到并执行匹配的 case 就退出 switch 块。 它阻止代码继续执行剩余的情况,确保只生成正确的输出。

const transport = 'bike';


switch (transport) {
case 'car':
console.log('🚗 Drive safely!');
break;
case 'bike':
console.log('🚲 Enjoy your bike ride!');
break;
case 'bus':
console.log('🚌 Have a pleasant bus journey!');
break;
}

直通技术

一个 case 在 switch 语句中不能有多个条件。 要在一个案例中合并多个条件,请考虑使用 fall-through 技术。 它不仅可以节省您的时间,还可以确保您不会重蹈覆辙。

当您故意省略 case 中的 break 关键字时,会发生 switch 语句中的失败,从而允许代码执行继续下一个 case,直到遇到 break 或到达 switch 块的末尾。 当多个案例共享相同的输出或操作时,这会很有用。

const clothing = 'jacket';


switch (clothing) {
case 't-shirt':
case 'shorts':
console.log('😎 Looks like it\'s warm outside!');
break;
case 'jacket':
case 'sweater':
console.log('❄️ Bundle up, it\'s cold!');
// No break, fall-through to the next case
case 'scarf':
console.log('🧣 Don\'t forget your scarf!');
break;
}

常见问题和陷阱

多个案例执行(忘记使用 break 语句)

使用 switch 语句时的一个常见错误是没有在每个 case 之后包含 break 语句。 此错误会导致意外失败,执行多个案例而不是仅执行所需的案例。

如何修复它:在每个 case 之后添加一个 break 语句以防止 fall-through。

const mood = 'happy';


switch (mood) {
case 'happy':
console.log('😀 Keep smiling!');
// <--- Missing break statement
case 'sad':
console.log('☹️ Cheer up!');
break;
case 'angry':
console.log('😠 Take a deep breath!');
break;
}


// --Output--
//😀 Keep smiling!
//☹️ Cheer up!

不正确的比较值和类型

Switch 语句使用严格比较,在比较不同数据类型时可能会导致意外结果。 在下面的示例中,字符串“2”不等于数字 2。这个陷阱可能会导致您的案例无法按预期执行。

如何修复:考虑变量的类型并记住它将被严格评估。 如果您正在处理较大的项目,TypeScript 可能会有所帮助。

const numOfPets = '2';


switch (numOfPets) {
case 2: // Because '2' !== 2
console.log('🐾 Double the fun!');
break;
default:
console.log('🐾 Share the love!');
}


// -- Output --
// 🐾 Share the love!

范围问题

switch 语句中的一个常见缺陷是声明没有块作用域或不正确作用域的变量,导致它们在其他情况下可访问,或产生语法错误。 您可能会遇到 Uncaught SyntaxError: ... 如果您尝试在多个子句中重新声明相同的变量。

修复:

对于你打算在所有情况下使用的公共变量,在你的 switch 语句之前用 let 声明它,或者;

将您的子句范围限定为块范围(即用括号 { ... } 包裹您的子句)

阻止范围你的条款:

// The problem: 
switch (weather) {
case 'rain':
const notification = '🌦️ ️Rainy days can be cozy!';
console.log(notification);
break;
case 'thunder':
// 'notification' is still accessible here
console.log(notification + ' ⚡ Be careful!');
break;
}
// Fix 1: Use Block Scope when declaring
switch (weather) {
case 'rain': { // <-- look here.
const notification = '🌦️ ️Rainy days can be cozy!';
console.log(notification);
break;
}
case 'thunder': {
const notification = '⚡ Be careful!';
console.log(notification);
break;
}
}


// Fix 2: Declare it with let before your statement
let notification = '' // <-- look here.
switch (weather)
case 'rain':
notification = '🌦️ ️Rainy days can be cozy!';
console.log(notification);
break;
case 'thunder':
notification = '⚡ Be careful!';
console.log(notification);
break;
}

结论

既然您知道什么是 switch 语句、它是如何工作的以及何时使用它,是时候开始实现它了! 

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯