Switch语句用法及案例

news2025/2/23 22:28:11

一、Switch语句用法

switch是多分支语句,用于判断一个表达式的值,然后执行相应的语句。(可以实现多选一)

switch语句执行思路:利用表达式的值,来判断执行哪个语句。(简单的来说就是利用我们的表达式的值和case后面的选你选项值进行匹配
,若匹配上,就执行case语句,若都没匹配上则执行default里面的语句)

语法规范:

switch(表达式) { 
    case1: 语句1;
    	break;
    case2: 语句2;
    	break; 
    case3: 语句3; 
    	break; 
        default: 语句4; 
        	break; 
    }

二、 代码验证:

代码:
<script>
        switch (3) { 
            case 1:
                console.log('1');
                break;
            case 2:
                console.log('2');
                break;
            case 3:
                console.log('3');
                break;
            default:
                console.log('没有匹配上');
                break;
        }

验证代码运行结果:

在这里插入图片描述

switch语句基于不同条件来执行不同的代码,“当要针对变量设置一系列的特定值的选项时,就需要使用switch语句”。

三、Switch语句使用注意事项:

  1. 在开发中,表达式经常写成变量,这样可以方便的调用;
  2. num 的值 和 case后面的值进行匹配时,“必须是 值 和 数据类型 一致,num === 2 ”;
  3. break 如果当前的case里面没有break ,则不会跳出switch,而是继续执行下一个case。

在这里插入图片描述

"值和数据类型一致"代码

<script>
        var num = 2;
        switch (num) {
            case 1:
                console.log('1');
                break;
            case 2:
                console.log('2');
                break;
            case 3:
                console.log('3');
                break;
            default:
                console.log('没有匹配上');
                break;
        }
    </script>

运行结果

在这里插入图片描述

"值和数据类型不一致"代码

 <script>
        var num = '2';//数据类型“字符型”
        switch (num) {
            case 1:
                console.log('1');
                break;
            case 2: //case值为数值型
                console.log('2');
                break;
            case 3:
                console.log('3');
                break;
            default:
                console.log('没有匹配上');
                break;
        }
    </script>

运行结果

在这里插入图片描述

四、案例(查询水果价格)

在弹窗输入水果的名称时,有 ——显示对应的水果价格;
没有——显示“没有此水果”

在这里插入图片描述

代码

<script>
        var fruits = prompt('请输入水果名称:');
        switch (fruits) {
            case '苹果':
                alert('苹果¥ 5.5');
                break;
            case '香蕉':
                alert('香蕉¥ 6.5');
                break;
            case '西瓜':
                alert('西瓜¥ 7.5');
                break;
            default:
                console.log('暂未定价');
                break;
        }
    </script>

运行结果

在这里插入图片描述
在这里插入图片描述

JavaScript案例文件下载
Gitee仓库地址:https://gitee.com/Muyangxun/java-script/blob/master/Projext

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405913.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue 3 安装及环境配置

Vue 3 安装及环境配置1、安装 Node.js2、配置默认安装目录和缓存日志目录3、配置环境变量4、配置淘宝镜像5、安装 vue 和脚手架6、安装vue-cli 3.x7、创建 vue 3 项目8、可能遇到的问题1、安装 Node.js Node.js 官网&#xff1a;https://nodejs.org/en/download 安装成功后在…

Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】

Vue3.x 项目实战&#xff08;一&#xff09; 内容参考链接Vue2.x全家桶Vue2.x 全家桶参考链接Vue2.x项目&#xff08;一&#xff09;Vue2.x 实现一个任务清单Vue2.x项目&#xff08;二&#xff09;Vue2.x 实现GitHub搜索案例Vue3.x项目&#xff08;三&#xff09;Vue3.x 实现一…

Vue项目部署(Nginx)

本文记录如何将做好的Vue项目部署到服务器上&#xff0c;需要准备&#xff1a; linux系统的服务器或者虚拟机Vue项目打包Nginx服务器的配置和部署1、linux系统准备 本次使用云主机作为部署主机。 2、Vue项目打包 切换到项目所在目录&#xff0c;使用 npm run build 命令完成项目…

深度学习——VGG16模型详解

1、网络结构 VGG16模型很好的适用于分类和定位任务&#xff0c;其名称来自牛津大学几何组&#xff08;Visual Geometry Group&#xff09;的缩写。 根据卷积核的大小核卷积层数&#xff0c;VGG共有6种配置&#xff0c;分别为A、A-LRN、B、C、D、E&#xff0c;其中D和E两种是最…

yolov5源码解析(9)--输出

本文章基于yolov5-6.2版本。主要讲解的是yolov5是怎么在最终的特征图上得出物体边框、置信度、物体分类的。 一。总体框架 首先贴出总体框架&#xff0c;直接就拿官方文档的图了&#xff0c;本文就是接着右侧的那三层输出开始讨论。 Backbone: New CSP-Darknet53Neck: SPPF, …

JavaWeb酒店管理系统

酒店管理系统 一、项目介绍 1、项目用到的技术栈 开发工具&#xff1a;idea语言&#xff1a;java、js、htmlajax数据库&#xff1a;MySQL服务器&#xff1a;Tomcat框架&#xff1a;mybatis、jQuery 2、项目实现功能 管理员和用户登录和退出功能以及用户注册功能&#xf…

【第二趴】uni-app开发工具(手把手带你安装HBuilderX、搭建第一个多端项目初体验)

文章目录写在前面HBuilderXHBuilderX 优势HBuilderX 安装uni-app 初体验写在最后写在前面 聚沙成塔——每天进步一点点&#xff0c;大家好我是几何心凉&#xff0c;不难发现越来越多的前端招聘JD中都加入了uni-app 这一项&#xff0c;它也已经成为前端开发者不可或缺的一项技能…

Eolink 治愈了后端开发者的痛

一、前后端的爱恨情仇 最近公司的一个前端同事和一个后端同事吵了一架&#xff0c;事情大概是这样的。后端说要联调接口&#xff0c;前端说你的数据尽量按我的要求来&#xff0c;后端不干&#xff0c;说你这个没用。前端就讲道理呀&#xff0c;传统的前后端分离返回的格式要尽…

【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊私聊

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…

保姆级教程:Ant Design Vue中 a-table 嵌套子表格

前端为Ant Design Vue 版本为1.6.2&#xff0c;使用的是vue2 Ant Design Vue中 a-table 嵌套子表格&#xff0c;说的可能稍微墨迹了点&#xff0c;不过重点内容都说的比较详细&#xff0c;利于新人理解&#xff0c;高手可以自取完整代码 内容概述&#xff1a;完成样式及完整代…

在收到消息后秒级使网站变灰,不改代码不上线,如何实现?

注意&#xff1a;文本不是讲如何将网站置灰的那个技术点&#xff0c;那个技术点之前汶川地震的时候说过。 本文不讲如何实现技术&#xff0c;而是讲如何在第一时间知道消息后&#xff0c;更快速的实现这个置灰需求的上线。 实现需求不是乐趣&#xff0c;指挥别人去实现需求才…

[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined(reading“category1Name“

明明页面正常显示&#xff0c;但是控制台却一直报 如下 错误 [Vue warn]:渲染错误:"TypeError:无法读取未定义的属性(读取category1Name)" 中发现的 Detail 的 vuex 仓库 import { reqDetail } from "/api" export default{actions:{async getDetail({co…

【前端修炼场】 — 这些标签你学会了么?快速拿下 “hr”

此文为【前端修炼场】第四篇&#xff0c;上一篇文章链接&#xff1a;上一篇 文章目录前言一、 常用标识符1.1 特殊标识符1.1.1 "<" 和 ">"&#xff08;<&#xff1b;&#xff09;1.1.2 空格&#xff08;&emsp&#xff1b;&#xff09;1.1.3 商…

uniapp微信小程序无法使用本地静态资源图片,背景图在真机不显示方法

前言 首先要说明&#xff0c;使用HBuilder或者vs Code工具开发的时候&#xff0c;在微信开发者工具调试的时候&#xff0c;我们使用本地图片是OK的&#xff0c;但是一旦放到真机上调试的时候&#xff0c;图片就显示不出来。 先看uniapp官网对背景图片的说明 错误用法 <tem…

uniapp 微信小程序和H5的弹窗滚动穿透解决

滚动穿透&#xff1a; 页面里的弹窗也是可以滚动的&#xff0c;然后页面本身内容多所以也是滚动的&#xff0c;就造成&#xff0c;在弹窗滚动的时候&#xff0c;页面内容也跟着滚动了。如图所示 ps: 电脑端分鼠标滚轮滚动和长按鼠标拖拽滚动&#xff0c;手机端只有触屏滑屏滚…

视频实时行为检测——基于yolov5+deepsort+slowfast算法

文章目录前言一、核心功能设计二、核心实现步骤1.yolov5实现目标检测2.deepsort实现目标跟踪3.slowfast动作识别三、核心代码解析1.参数2.主函数3.将结果保存成视频总结前言 前段时间打算做一个目标行为检测的项目&#xff0c;翻阅了大量资料&#xff0c;也借鉴了不少项目&…

【Java】运算符

我不去想是否能够成功 既然选择了远方 便只顾风雨兼程 —— 汪国真 目录 1. 认识运算符 1.1 认识运算符 1.2 运算符的分类 2. 算术运算符 2.1 四则运算符 2.2 复合赋值运算符 2.3 自增 / 自减 运算符 3.关系运算符 4.逻辑运算符 4.1 逻辑与 && 4.2 逻…

什么是异步

文章目录 前言一、异步是什么&#xff1f;二、举个例子来理解异步 1.异步最典型的例子就是“回调函数”总结前言 在vue的过程中&#xff0c;我们一定会遇到诸如&#xff1a; function&#xff08;参数&#xff09;.then(res>{}) 形式的代码。到底怎么编译执行的呢 &#xf…

【Jetpack】ViewModel 架构组件 ( 视图 View 和 数据模型 Model | ViewModel 作用 | ViewModel 生命周期 | 代码示例 | 使用注意事项 )

文章目录一、Activity 遇到的问题二、视图 View 和 数据模型 Model三、ViewModel 架构组件作用四、ViewModel 代码示例1、ViewModel 视图模型2、Activity 组件3、UI 布局文件4、运行效果五、ViewModel 生命周期六、ViewModel 使用注意事项一、Activity 遇到的问题 Activity 遇到…

宝塔部署nodejs项目

前言 部署操作很简单&#xff0c;网上也有很多教程&#xff0c;不过我还是踩坑了&#xff0c;这里记录一下&#xff0c;给其他人也避避坑吧。 步骤 首先你已经有了服务器&#xff0c;并且打开了宝塔面板&#xff0c;其次准备好你的nodejs项目。 在宝塔安装pm2管理器&#xf…