前端学习手册-JavaScript条件判断语句全解析(十八)

一、if else语句:条件判断语句

条件判断语句是编程中常用的逻辑控制结构。它允许程序根据特定条件执行不同的操作。

例如,可以通过分数显示差异化内容,或基于布尔值判断操作成功与否。

javascript 复制代码
function calculateGrade(score) {
    if (score >= 90) return "A";
    else if (score >= 80) return "B";
    else if (score >= 70) return "C";
    else if (score >= 60) return "D";
    else return "F";
}

流程图如下:

if else if else 语句

在 if else if else 语 句中允许您定义多个条件表达式,并根据表达式的结果执⾏相应的代码,语法格式如下:

if (条件表达式 1) {

// 条件表达式 1 为真时执⾏的代码

} else if (条件表达式 2) {

// 条件表达式 2 为真时执⾏的代码

}

...

else if (条件表达式N) {

// 条件表达式 N 为真时执⾏的代码

} else {

// 所有条件表达式都为假时要执⾏的代码

}

提示:if else if else 语句在执⾏过程中,当遇到成⽴的条件表达式时,会⽴即执⾏其后 { } 中的代码,然后退出整个 if else if else 语句,若后续代码中还有成⽴的条件表达式,则不会执⾏。

注意事项:JavaScript 解释器将根据就近原则,使⽤嵌套 if else 时,如果只有⼀⾏语句,也应该使⽤⼤括号包裹起来,避免条件歧义。

二、switch case语句详解

switch case 语句和 if else 语句都能实现多分支结构,根据条件执行不同代码。相比 if else 结构,switch case 语句更简洁紧凑,执行效率更高。

javascript 复制代码
function calculateGrade(score) {
    // 计算十位数
    let tens = Math.floor(score / 10);
    
    switch(tens) {
        case 10:
        case 9:
            return "A";  // 90-100分
        case 8:
            return "B";  // 80-89分
        case 7:
            return "C";  // 70-79分
        case 6:
            return "D";  // 60-69分
        default:
            return "F";  // 0-59分
    }
}

流程图如下:

switch 语句通过将表达式与各个 case 子句的值进行严格比较(===)来执行分支判断:

当表达式值与 case 值匹配时:

1.执行对应的语句块

2.遇到 break 则立即退出整个 switch 结构

3.若省略 break,会继续执行后续 case 的语句(称为"case 穿透")

可选的 default 子句:

1.在所有 case 匹配失败时执行

2.不需要 break,因其位于结构末尾

重要特性:

1.使用严格相等比较,不进行类型转换

2.case 子句可省略语句实现条件穿透

3.在函数中使用时,可用 return 替代 break 退出

注意事项:

1.每个 case 只定义执行起点,需显式使用 break 定义终点

2.缺少 break 会导致逻辑错误,破坏预期的控制流

break 关键字

switch 语句会依次检查每个 case 条件,一旦找到匹配项,就会执行对应的代码块,并且会继续执行后续所有 case 语句。为了避免这种穿透现象,必须在每个 case 子句末尾使用 break 语句来终止 switch 执行。

此外,break 语句不仅可以用于跳出 switch 结构,还能用于中断各种循环语句(包括 for、for in、while 和 do while 等),具体用法将在后续详细介绍。

相关推荐
我只会写Bug啊2 小时前
一文读懂:cookie、localStorage与sessionStorage的区别与应用
前端
神仙别闹2 小时前
基于C++生成树思想的迷宫生成算法
开发语言·c++·算法
杨超越luckly2 小时前
HTML应用指南:利用GET请求获取全国新东方门店位置信息
前端·数据库·arcgis·html·门店数据
海上彼尚2 小时前
Go之路 - 1.gomod指令
开发语言·后端·golang
我命由我123452 小时前
Java 开发使用 MyBatis PostgreSQL 问题:使用了特殊字符而没有正确转义
java·开发语言·数据库·postgresql·java-ee·mybatis·学习方法
C语言小火车2 小时前
红黑树(C/C++ 实现版)—— 用 “带配重的书架” 讲透本质
c语言·开发语言·c++·红黑树
阿里嘎多学长2 小时前
2025-12-10 GitHub 热点项目精选
开发语言·程序员·github·代码托管
颜颜yan_2 小时前
DevUI零基础入门教程:5分钟快速上手Vue DevUI组件库
前端·javascript·vue.js
武藤一雄2 小时前
[WPF] 万字拆解依赖属性与附加属性
前端·microsoft·c#·.net·wpf