javaScript:分支语句的理解与使用(附带案例)

目录

前言

补充

另一种说法 

分支语句

1.if语句 

a.单分支语句

注意 

b.双分支语句 

注意点 

c.多分支语句(分支语句的联级语句) 

补充 

 2.三元运算符

三元运算符 ? :

使用场景

3.switch语句

解释

释义:

注意事项:

相关代码 

案例 

1.在input框输入两个数字判断大小

效果图 

代码 

2.判断闰年

效果图

代码 

3.判断成绩 

效果图

代码 


前言

        分支语句是编程中常用的一种控制结构,它允许根据条件的不同执行不同的代码。通过合理运用分支语句,可以根据不同的条件执自己行不同的代码,实现更精确的控制流程。在实际编程中,我们可以根据需求选择适当的分支语句来解决问题。  

补充

• 程序三大流程控制语句

1. 顺序结构

2.分支结构

3.循环结构

另一种说法 

程序结构

1.基本结构(顺序执行)

2.分支结构(分支语句)

3.循环结构(循环语句)

分支语句

分支语句主要包括以下三种,接下来我将对下面三种分支语句进行讲解。

a.if语句           (if语句分为单分支,双分支,多分支)

b.三元运算符  (简化版的分支语句)

c.switch语句   (switch是开关的意思)

1.if语句 

a.单分支语句

if(判断条件){只有当if中的判断条件为true的时候,{}中的代码才会被执行,如果判断条件不为true,则跳过{}中的代码,程序继续往下执行
}

注意 

       if后面()中的判断条件,不管里面的表达式有多复杂,返回的值永远只有true

或者false。括号内的条件为true时,进入大括号里执行代码 。   小括号内的结果若不是布尔类型时,会发生隐式转化为布尔类型。     如果大括号只有一个语句,大括号可以省略,但是,不提倡这么做~(虽然可以在if语句中省略大括号,但这样做可能会导致代码可读性和维护性的问题。特别是当if语句后面紧跟着一个缩进的代码块时,如果没有大括号明确定义代码块的范围,可能会引发错误。为了代码的一致性和可读性,建议始终使用大括号,即使代码块中只有一条语句。)

b.双分支语句 

if(判断条件){如果判断条件 为true,则执行这里的代码
}else{如果判断条件 不为true,则执行else中的代码
}

注意点 

       if 可以单独使用,else必须结合if一起使用。else指的是除了满足if条件

之外的所有条件。只有一行的时候可以转成三元,多行不行,建议只有一行的时候转化为三元

c.多分支语句(分支语句的联级语句) 

         在使用if语句的时候,else的范围有时候会比较大,因此可以使用else if,对具体的情况进行细分,else if 可以根据情况设置多个。使用场景:适合于有多个结果的时候,比如学习成绩可以分为; 优良中差

if(判断条件){执行语句
}slse if(判断条件){执行语句
}else{执行语句
}

补充 

注意

   1.当你书写判断条件的时候,注意等于是 == 不是 = , = 是赋值

   2.0 '' null  undefind 如果写在判断条件中,都被解析为false

   非0 , 非''  非null 非 undefined 如果写在判断条件中,都被解析为true

 2.三元运算符

三元运算符 ? :

判断条件判断条件为真,则执行当前代码判断条件为假,则执行当前代码

使用场景

使用场景:其实比if双分支更简单的写法,可以使用三元表达式 。 一般用来取值。

 

3.switch语句

        switch语句,特点是,默认贯穿整个结构,可以使用关键字break阻止贯穿,break的作用是阻断当前结构语句,可以阻断switch 也可以阻断 循环

 switch (数据) {case 值1:代码1break;case 值2:代码2break;default:代码nbreak;}

解释

释义:

1,找到跟小括号里数据全等的case值,并执行里面对应的代码。

2,若没有全等=== 的则执行default里的代码。 列:数据若根值2全等,则执行代码2      

注意事项:

1.switch case 语句一般用于等值判断,不适合用于区间判断     

 2.switch cass 一般需要配合break关键字使用,没有break会造成case穿透。

相关代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>switch语句</title>
</head>
<body></body>
</html>
<script>/*switch语句,特点是,默认贯穿整个结构,可以使用关键字break阻止贯穿break的作用是阻断当前结构语句,可以阻断switch 也可以阻断 循环*/ let count = 70;switch (count) {case 30:console.log('天涯何处无芳草');break;  //阻断switch语句,跳出switchcase 170:console.log('一曲肝肠断');break;// default: 是默认的意思,如果上面的条件都不能执行则会执行default中的代码default:console.log('只因你太美+default');break;}let num = 1;switch (num) {case 1:console.log('当前是1');num+=10console.log(num);case 2:console.log('当前是2');num++console.log(num);break;default:num--console.log('当前是default');console.log(num);break;}
</script>

案例 

1.在input框输入两个数字判断大小

效果图 

代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例</title>
</head>
<body>数据1:  <input type="number" value="" id="a" > <br>数据2:  <input type="number" value="" id="b"> <br><button id="bth">比较大小</button><hr>
</body>
</html>
<script>let a = document.getElementById('a')let b = document.getElementById('b')let bth = document.getElementById('bth')bth.onclick = function(){let num1= a.value - 0let num2= b.value - 0// num1>num2? alert(num1):alert(num2)if (num1>num2) {alert(num1)}else if(num2==num1){alert('相等')}else{alert(num2)}}
</script>

2.判断闰年

效果图

 

代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>if语句练习</title>
</head>
<body>输入年份:<input type="number" value="" id="year" > <br><button id="bth2">查看是否是润年</button>
</body>
</html>
<script>let year = document.getElementById('year')let bth2 = document.getElementById('bth2')bth2.onclick = function(){let n = year.value - 0if (n % 4 == 0 && n % 100 > 0 ||n % 400 == 0) {alert(n+'是闰年')}else{alert(n+'是平年')}}
</script>

3.判断成绩 

效果图

 

 

 

代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>if语句练习</title>
</head>
<body>
</body>
</html>
<script>let f = +prompt('输入考试成绩')if (f == 100) {alert('恭喜你的成绩为满分,奖励一个对象')}else if (f>=90) {alert('优秀')}else if(f>=80){alert('良好')}else if(f>=70){alert('中等')}else if(f>=60){alert('及格')}else{alert('开除学籍')}
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带你彻底了解什么是API接口?

作为一名资深程序员&#xff0c;我知道很多人对API接口这个名词可能还不太了解。今天我要给大家分享一些关于API接口的知识&#xff0c;让你们彻底了解它的概念和作用。一起来看看吧&#xff01; 首先&#xff0c;我们先来解释一下API的全称─Application Programming Interfac…

【大数据之Flume】七、Flume进阶之自定义Sink

&#xff08;1&#xff09;概述&#xff1a;   Sink 不断地轮询 Channel 中的事件且批量地移除它们&#xff0c;并将这些事件批量写入到存储或索引系统、或者被发送到另一个 Flume Agent。 Sink 是完全事务性的。在从 Channel 批量删除数据之前&#xff0c;每个 Sink 用 Chan…

基于SpringBoot+LayUI的宿舍管理系统 001

项目简介 源码来源于网络&#xff0c;项目文档仅用于参考&#xff0c;请自行二次完善哦。 系统以MySQL 8.0.23为数据库&#xff0c;在Spring Boot SpringMVC MyBatis Layui框架下基于B/S架构设计开发而成。 系统中的用户分为三类&#xff0c;分别为学生、宿管、后勤。这三…

Kubernetes集群部署上篇(安装部署,但是集群网络未部署)

第四阶段 时 间&#xff1a;2023年8月9日 参加人&#xff1a;全班人员 内 容&#xff1a; Kubernetes集群部署上篇 目录 一、Kubernetes部署方式 &#xff08;一&#xff09;minikube &#xff08;二&#xff09;二进制包 &#xff08;三&#xff09;Kubeadm Kubea…

(八)穿越多媒体奇境:探索Streamlit的图像、音频与视频魔法

文章目录 1 前言2 st.image&#xff1a;嵌入图像内容2.1 图像展示与描述2.2 调整图像尺寸2.3 使用本地文件或URL 3 st.audio&#xff1a;嵌入音频内容3.1 播放音频文件3.2 生成音频数据播放 4 st.video&#xff1a;嵌入视频内容4.1 播放视频文件4.2 嵌入在线视频 5 结语&#x…

E. Power of Points - 思维

分析&#xff1a; 题意本质就是找点在数组中任意一个位置时和所有的端点之间的距离和&#xff0c;但是直接暴力会超时&#xff0c;可以对数组排个序&#xff0c;设当前遍历的是xi&#xff0c;那么此时求的到各端点的距离就是j从1 ~ i - 1的所有端点与xi的距离之和&#xff0c;也…

章节4:JavaScript操作Cookie

章节4&#xff1a;JavaScript操作Cookie 直接利用Cookie登录 JavaScript语法 获取&#xff1a;document.cookie; 设置&#xff1a;document.cookie“usernamexx”; 删除&#xff1a;document.cookie“usernamexx;expiresThu, 01 Jan 1970 00:00:00 GMT”;

《爬虫》爬取页面图片并保存

爬虫 前言代码效果 简单的爬取图片 前言 这几天打算整理与迁移一下博客。因为 CSDN 的 Markdown 编辑器很好用 &#xff0c;所以全部文章与相关图片都保存在 CSDN。而且 CSDN 支持一键导出自己的文章为 markdown 文件。但导出的文件中图片的连接依旧是 url 连接。为了方便将图…

Neo4j笔记-数据迁移(导出/导入)

这里先说明以下几点&#xff1a; Neo4j在4.0下版本默认的库名是&#xff1a;graph.db Neo4j在4.0上版本默认的库名是&#xff1a;neo4j.db 不管是Neo4j&#xff0c;还是Neo4j Desktop&#xff0c;都会在bin目录下有neo4j、neo4j-admin软件。在conf目录下&#xff0c;有neo4j.…

【计算机网络】概述及数据链路层

每一层只依赖于下一层所提供的服务&#xff0c;使得各层之间相互独立、灵活性好&#xff0c;已于实现和维护&#xff0c;并能促进标准化工作。 应用层&#xff1a;通过应用进程间的交互完成特定的网络应用&#xff0c;HTTP、FTP、DNS&#xff0c;应用层交互的数据单元被称为报…

《合成孔径雷达成像算法与实现》Figure3.7

代码复现如下&#xff1a; clc clear all close all%参数设置 TBP 100; %时间带宽积 T 10e-6; %脉冲持续时间%参数计算 B TBP/T; …

linux系统虚拟主机开启支持SourceGuardian(sg11)加密组件

注意&#xff1a;sg11我司只支持linux系统虚拟主机自主安装。支持php5.3及以上版本。 1、登陆主机控制面板&#xff0c;找到【远程文件下载】这个功能。 2、远程下载文件填写http://download.myhostadmin.net/vps/sg11_for_linux.zip 下载保存的路径填写/others/ 3、点击控制…