JavaScript中Switch语句的使用方法

2023-05-16

除了if ... else之外,JavaScript还有一个称为switch语句的功能。 switch是一种条件语句,它将针对多种可能的情况评估表达式,并根据匹配的情况执行一个或多个代码块。 switch语句与包含许多其他if块的条件语句密切相关,并且它们通常可以互换使用。

在本教程中,我们将学习如何使用switch语句,以及如何使用相关的关键字case,break和default。 最后,我们将介绍如何在switch语句中使用多个case。

Switch

switch语句计算表达式并作为匹配大小写的结果执行代码。 起初它看起来有点令人生畏,但基本语法类似于if语句。 它将始终使用switch(){}编写,括号中包含要测试的表达式,以及包含要执行的潜在代码的花括号。

下面是一个带有两个case语句的switch语句和一个称为default的回退的示例。

switch (expression) {
    case x:        
    // execute case x code block
        break;    
     case y:
     // execute case y code block
        break;   
      default:        
      // execute default code block
      }

遵循上面代码块的逻辑,这是将要发生的事件序列:

表达式被评估

第一个case,x将针对表达式进行测试。如果匹配,则代码将执行,break关键字将结束该switch块。

如果它不匹配,x将跳过,y并将针对表达式测试案例。如果y匹配表达式,代码将执行并退出switch块。

如果所有情况都不匹配,则default代码块将运行。

让我们按照上面的语法制作一个switch语句的工作示例。 在此代码块中,我们将使用新的Date()方法找到一周中的当前日期,并使用getDay()来打印与当天相对应的数字。 1代表星期一,一直代表7代表星期日。 我们将从设置变量开始。

const day = new Date().getDay();

使用switch,我们将在一周中的每一天向控制台发送消息。程序将按从上到下的顺序运行以查找匹配项,一旦找到一个,该break命令将停止该switch块继续评估语句。

week.js

// Set the current day of the week to a variable, with 1 being Monday and 7 being Sunday
const day = new Date().getDay();
switch (day) {
    case 1:
        console.log("Happy Monday!");        
        break;    
    case 2:
        console.log("It's Tuesday. You got this!");        
        break;    
    case 3:
        console.log("Hump day already!");        
        break;    
    case 4:
        console.log("Just one more day 'til the weekend!");        
        break;    
     case 5:
        console.log("Happy Friday!");        
        break;    
      case 6:
        console.log("Have a wonderful Saturday!");        
        break;    
      case 7:
        console.log("It's Sunday, time to relax!");        
        break;    
      default:
        console.log("Something went horribly wrong...");
}

Output
  
'Just one more day 'til the weekend!'

此代码在星期四进行了测试,对应于4,因此控制台输出为Just one more day 'til the weekend!。根据您测试代码的星期几,您的输出会有所不同。我们default在最后包含一个块以便在出现错误时运行,在这种情况下不应该发生,因为一周只有7天。例如,我们也可能只有周一到周五的打印结果,并且该default块可能在周末也有相同的信息。

如果我们在每个语句中省略了break关键字,则其他case语句都不会被评估为true,但程序将继续检查直到它到达结尾。 为了使我们的程序更快,更高效,我们包括break。

Switch Ranges

在某种情况下,您需要评估switch块中的一系列值,而不是像上面示例中的单个值。 我们可以通过将表达式设置为true并在每个case语句中执行操作来完成此操作。

为了使这更容易理解,我们制作了一个简单的评分应用程序,它将获得一个数字分数并将其转换为字母等级,具有以下要求。

  • 等级90及以上是A
  • 等级80到89是B
  • 等级70到79是C
  • 等级60到69是D
  • 等级59或以下是F

现在我们可以将其写为switch语句。 由于我们正在检查范围,因此我们将在每种情况下执行操作以检查每个表达式是否正在评估为true,然后在满足true要求后突破语句。

grades.js

// Set the student's grade
const grade = 87;
switch (true) {
    // If score is 90 or greater
    case grade >= 90:
        console.log("A");       
        break;    
     // If score is 80 or greater
    case grade >= 80:
        console.log("B");        
        break;    
     // If score is 70 or greater
    case grade >= 70:
        console.log("C");       
        break;    
      // If score is 60 or greater
    case grade >= 60:
        console.log("D");        
        break;    
      // Anything 59 or below is failing
    default:
        console.log("F");
}

Output
  
'B'

在此示例中,要计算的括号中的表达式为true。 这意味着任何评估为true的情况都是匹配的。

就像使用else一样,switch从上到下进行评估,并接受第一个真正的匹配。 因此,即使我们的等级变量为87,因此对于C和D也评估为真,第一个匹配是B,它将是输出。

Multiple Cases

您可能会遇到多个case应具有相同输出的代码。 为了实现这一点,您可以为每个代码块使用多个case。

为了测试这个,我们将制作一个小的应用程序,将当前月份与适当的季节相匹配。 首先,我们将使用新的Date()方法查找与当前月份对应的数字,并将其应用于月份变量。

为简单起见,我们的应用程序将输出具有以下规格的四季:

  • 冬季:一月,二月和三月
  • 春天:四月,五月和六月
  • 夏季:七月,八月和九月
  • 秋天:十月,十一月和十二月

以下是我们的代码。

seasons.js

// Get number corresponding to the current month, with 0 being January and 11 being December
const month = new Date().getMonth();
switch (month) {
    // January, February, March
    case 0:    
    case 1:    
    case 2:
        console.log("Winter");        
        break;    
    // April, May, June
    case 3:    
    case 4:    
    case 5:
        console.log("Spring");        
        break;    
    // July, August, September
    case 6:    
    case 7:    
    case 8:
        console.log("Summer");        
        break;    
    // October, November, December
    case 9:    
    case 10:    
    case 11:
        console.log("Autumn");        
        break;    
    default:
        console.log("Something went wrong.");
   }

当我们运行代码时,我们将根据上面的规范接收识别当前季节的输出。


Output
  
Summer

出版时的当月是8,这与“夏季”季节产出的一个case陈述相对应。

结论:

在本文中,我们回顾了switch语句,这是一种条件语句,用于评估表达式并根据匹配结果输出不同的值。 我们使用范围和多个case语句检查了switch语句。

想要了解更多相关知识,可访问 前端学习网站!! 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript中Switch语句的使用方法 的相关文章

  • ReferenceError:regeneratorRuntime未定义(但在范围内工作)

    我遇到过这种奇怪的情况 ReferenceError regeneratorRuntime is not defined 我已经设法在一个非常小的设置中重现 与同一问题上的类似问题相比 并且还注意到一些奇怪的行为 具体取决于是否使用范围 以
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • Node.js日志记录指南

    当你开始用 JavaScript 进行开发时 xff0c 可能学到的第一件事就是如何用 console log 将内容记录到控制台 如果你去搜索如何调试 JavaScript xff0c 会发现数百篇博文和 StackOverflow 文章
  • 软件测试的测试方法及测试流程

    一 测试方法 xff1a 白盒测试 xff1a 把软件比作一个打开的盒子 xff0c 可以看到软件代码的实现 xff0c 针对代码的实现验证代码是否存在问题 单元测试阶段采用的测试方法 灰盒测试 xff1a 介于白盒和黑盒测试之间 灰盒测试
  • 18个用于创建漂亮图表的JavaScript库推荐

    几乎不可能想象没有图形和图表的任何仪表盘 它们快速有效地呈现复杂的统计数据 此外 xff0c 一个好的图表还可以增强网站的整体设计 在本文中 xff0c 我将向您展示一些用于图形和图表的最佳JavaScript库 这些库将帮助您为将来的项目
  • JavaScript基础--引用数据类型 (对象)

    本文主要讲述了JavaScript对象的属性和对象的引用 xff0c 以及对象的读取 赋值 删除和获取对象键名的操作 1 对象 对象就是一组 键值对 xff08 key value xff09 的集合 xff0c 是一种无序的复合数据集合
  • javascript面向对象设计

    javascript和java语言不一样 xff0c 它没有类这个说法 xff0c 更没有子类父类一说 xff0c 所以它所谓的继承机制 xff0c 也是和其他语言完全不同的 创建对象三种方式 1 最简单的方式 xff0c 创建一个obje
  • 关键CSS和Webpack:自动最小化渲染阻止CSS

    消除渲染阻止的JavaScript和CSS 这是我始终坚持使用的Google Page Speed Insights建议 Google建议您在页面加载准备就绪时将最初需要的CSS 内插 CSS内嵌并加载CSS的其余部分 当访问web页面时
  • 如何用SASS编写可重用的CSS

    Sass是一个CSS预处理程序 xff0c 它在前端工程师的工具箱中变得至关重要 Sass之所以流行 xff0c 是因为它修复了几个CSS缺陷 相关推荐 xff1a css在线手册 这也是Bootstrap 4运行的基础 这意味着为了理解如
  • JS 变量的作用域及闭包

    与闭包有关的概念 xff1a 变量的作用域和变量的生存周期 下面本篇文章就来给大家介绍一下JS中变量的作用域及闭包 xff0c 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 一 变量的作用域 1 变
  • 理解JavaScript中的变量、范围和提升

    变量是许多编程语言的基本组成部分 xff0c 也是新手需要学习的第一个也是最重要的概念 JavaScript中有许多不同的变量属性 xff0c 以及命名变量时必须遵循的一些规则 在JavaScript中 xff0c 有三个关键字用于声明变量
  • 用于VueJS和Webpack的代码分割模式

    拆分单个页面应用程序的代码是提高其初始加载速度的一个很好的方法 由于用户不必一次性下载所有代码 xff0c 他们将能够更快地看到页面并与页面进行交互 这将提高用户体验 xff0c 特别是在移动领域 xff0c 这是搜索引擎优化的一个胜利 x
  • javascript掌握正则表达式

    正则表达式 xff08 英语 xff1a Regular Expression xff0c 在代码中常简写为regex regexp或RE xff09 使用单个字符串来描述 匹配一系列符合某个句法规则的字符串搜索模式 我想正则表达式之所以难
  • 知道要测试什么——Vue组件单元测试

    关于单元测试Vue组件 xff0c 我看到的最常见的问题是 我到底应该测试什么 虽然测试过多或过少都是可能的 xff0c 但我的观察是 xff0c 开发人员通常会在测试过多时犯错误 毕竟 xff0c 没有人愿意成为一个组件测试不足导致应用程
  • 软件测试 | 测试开发书单 | 测试工程师必读经典好书,你读过几本?

    测试好书1080 480 46 3 KB 软件测试入行容易进阶难 在持续交付体系背景下 xff0c 要成为测试开发高手意味着非常系统综合的知识储备 广泛阅读经典好书是快速成长的必要方式 霍格沃兹测试学院重点推荐几本测试经典好书以及必读清单
  • 使用webpack提升vue.js应用程序的四种方法

    Webpack是开发Vue js单页面应用程序的必要工具 通过管理复杂的构建步骤 xff0c 它使您的开发工作流更加简单 xff0c 并且可以优化应用程序的大小和性能 在本文中 xff0c 我将解释Webpack提升Vue应用程序的四种方法
  • 了解Node.js中的流(Stream)

    Node js 中的流 xff08 Stream xff09 是出了名的难用甚至是难以理解 用 Dominic Tarr 的话来说 xff1a 流是 Node 中最好的 xff0c 也是最容易被误解的想法 即使是 Redux 的创建者和 R
  • 深入了解Vue.js的作用域插槽

    作用域槽是Vue js的一个有用特性 xff0c 它可以使组件更加通用和可重用 唯一的问题是它们很难理解 试着让你的头在父母和孩子的范围内交织 xff0c 就像解决一个棘手的数学方程 当你不能很容易地理解某件事时 xff0c 一个好的方法是
  • JavaScript常用基础算法

    一个算法只是一个把确定的数据结构的输入转化为一个确定的数据结构的输出的function 算法内在的逻辑决定了如何转换 基础算法 一 排序 1 冒泡排序 冒泡排序function bubbleSort arr for var i 61 1 l
  • HTML中的meta标签属性的使用

    之前学习前端中 xff0c 对meta标签的了解仅仅只是这一句 lt meta charset 61 34 UTF 8 34 gt 但是打开任意的网站 xff0c 其head标签内都有一列的meta标签 下面我们就来详细介绍一下meta标签
  • 移动端H5开发常用小技巧(总结)

    本篇文章给大家整理一些在移动端H5开发常见的问题给大家做下分享 xff0c 这里很多是在开发过程中遇到的大坑或者遭到过吐糟的问题 xff0c 希望能给大家带来或多或少的帮助 html 篇 常用的meta属性设置 meta对于移动端的一些特殊
  • JavaScript中Switch语句的使用方法

    除了if else之外 xff0c JavaScript还有一个称为switch语句的功能 switch是一种条件语句 xff0c 它将针对多种可能的情况评估表达式 xff0c 并根据匹配的情况执行一个或多个代码块 switch语句与包含许