前端学习手册-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 等),具体用法将在后续详细介绍。

相关推荐
cz追天之路15 小时前
华为机考--- 字符串最后一个单词的长度
javascript·css·华为·less
半桶水专家15 小时前
go语言中的结构体嵌入详解
开发语言·后端·golang
Light6016 小时前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟16 小时前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify
在屏幕前出油16 小时前
二、Python面向对象编程基础——理解self
开发语言·python
Java后端的Ai之路16 小时前
【神经网络基础】-神经网络学习全过程(大白话版)
人工智能·深度学习·神经网络·学习
阿方索17 小时前
python文件与数据格式化
开发语言·python
ModyQyW17 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
bitbitDown17 小时前
我的2025年终总结
前端
五颜六色的黑17 小时前
vue3+elementPlus实现循环列表内容超出时展开收起功能
前端·javascript·vue.js