正确使用 switch or if-else

深沉影子灰2023-08-29 17:56

JavaScript switch 语句是一种根据不同条件在代码中做出决策的方法。它是使用多个 if-else 语句的更有条理、更简洁的替代方案。switch 语句计算给定的表达式（可以是变量或值），并将其与几种可能的情况进行比较。如果表达式的值与其中一种情况匹配，则执行关联的代码块（一组指令）。如果未找到匹配项，则可以执行可选的默认情况作为后备，这意味着它会在其他情况都不适用时运行。

例如，下面是一个简单的 switch 语句，用于检查名为 的变量的值day：

arduino 复制代码 
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，后跟括号中的表达式。该表达式与包含在 switch 块中的一系列 case 标签进行比较。每个 case 标签代表一个不同的值，当表达式与 case 标签的值匹配时，执行 case 后面的代码块。语句break通常用于在执行匹配的 case 后退出 switch 块，确保仅运行预期的代码块，并防止跳到下一个 case。或者，可以包含默认情况，以便在没有任何情况标签与表达式匹配时提供后备操作，从而确保对未知值的响应。

arduino 复制代码 
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 结构：

arduino 复制代码 
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 语句如下所示：

arduino 复制代码 
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

  1. 大量单变量条件： 当需要处理大量条件时，switch 语句通常比 if-else 链更有组织性且更易于阅读。
  2. 单变量评估： 如果您评估的条件基于具有多个不同值的单个变量或表达式，则 switch 语句可以提供比 if-else 模式更高效、更清晰的解决方案。
  3. 更快的代码执行速度： 在某些情况下，JavaScript 引擎可以优化 switch 语句，与一系列 if-else 语句相比，可以实现更快的代码执行速度。
  4. 更容易维护： Switch 语句使添加、删除或修改案例变得更加容易，因为每个案例在 switch 块中都是独立的。相反，当需要更改时，if-else 链可能需要更广泛的修改。
  5. 默认回退： Switch 语句提供可选的默认情况，当其他情况都不与给定表达式匹配时可以执行该默认情况。此功能允许以一种干净的方式处理意外或未知值。

何时使用if-else超过switch

  1. 复杂条件： 如果您正在评估的条件涉及复杂逻辑、多个变量或关系和逻辑运算符，则 if-else 模式提供了更大的灵活性，并且比 switch 语句更适合这些情况。
  2. 基于范围的条件： 当您需要检查一系列非离散值或条件时，if-else 模式提供了更好的解决方案，因为 switch 语句是为比较离散值而设计的。
  3. 条件数量少： 如果只有几个简单的条件需要检查，则使用 if-else 模式比 switch 语句更直接、更容易编写。
  4. 非常量 case： Switch 语句需要 case 标签为常量值，这意味着它们不能是在运行时更改的表达式。如果您需要评估具有非常量值的条件，则 if-else 模式是合适的选择。
  5. 评估真值或假值： 当您需要检查值是真值还是假值时，If-else 模式适用。Switch 语句不是为这种类型的评估而设计的，并且需要更详细的代码才能完成相同的结果。
  6. 提前退出条件： 如果您有提前退出条件，一旦满足特定条件就不需要进一步评估，则 if-else 模式可能会更有效。使用 switch 语句，即使发现早期匹配，也会评估所有情况（除非您使用"break"语句）。

决定使用 switch 或 if-else

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

arduino 复制代码 
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 语句提供了附加功能和概念，可用于提高代码的性能、可读性和简洁性。

案例default_

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

arduino 复制代码 
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 块。它阻止代码继续执行剩余的情况，确保只生成正确的输出。

arduino 复制代码 
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 语句中不能有多个条件。要在一种情况下合并多个条件，请考虑使用失败技术。它不仅可以节省您的时间，还可以确保您不会重复。

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

python 复制代码 
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 语句时的一个常见错误是break在每个 case 后面都没有包含该语句。此错误会导致意外失败，执行多个案例而不是仅执行所需的案例。

如何解决： 在每个案例后面添加一条break语句以防止失败。

arduino 复制代码 
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可能会有所帮助。

arduino 复制代码 
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: ...如果您尝试在多个子句中重新声明同一变量，您可能会遇到问题。

修复：

  • let对于您打算在所有情况下使用的通用变量，请在 switch 语句之前声明它，或者；
  • 将子句的范围设置为块范围（即用括号将子句括起来{ ... }）

限制您的子句的范围：

javascript 复制代码 
// 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是语句、它如何工作以及何时使用它。

相关推荐
IT女孩儿1 小时前
CSS查缺补漏（补充上一条）
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz2 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇2 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒2 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁：程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用？与 JavaScript 函数有哪些区别？
前端·javascript·typescript
瑞雨溪3 小时前
AJAX的基本使用
前端·javascript·ajax
热门推荐
01【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07【postgresql 基础入门】多表联合查询 join与union 并，交，差等集合操作，两者的区别之处08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10IT专业入门，高考假期预习指南