前端研习录（19）——JavaScript条件语句合集

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript条件语句部分

一、if语句

1、if语句

if语句通过判断一个表达式的布尔值的真伪，执行不同的语句，语法如下：

if (表达式){
    语句A；
}
语句B;
1
2
3
4

如果表达式返回的布尔值为true，则进入大括号执行语句A，后执行语句B，如果为false，则跳过大括号内容直接执行语句B，示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var user = "admin1"
        var pass = "123"
        if (pass == "123"){
            console.log("密码正确")
        }
        console.log("我必然会被执行A")

        console.log("--------------分割线-----------------")

        if(user=="admin"){
            console.log("用户名正确")
        }
        console.log("我必然会被执行B")
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

结果如下：
在这里插入图片描述
可以看出，由于第一个if表达式中返回的结果为true，所以大括号内的得以执行，而第二个if表达式中的结果范围为false，大括号中的内容跳过，继续执行下一个。

2、if…else…语句

在if代码块后面可以跟一个else，表示不满足条件的时候需要执行的代码，语法如下：

if (条件语句){
    语句A;  //条件语句返回值为true时所要执行的语句
}else{
    语句B;  //条件语句返回值为false时所要执行的语句
}
语句C;
1
2
3
4
5
6

还可以有多if组成的条件语句，语法如下：

if (条件语句A){
    语句A;  //条件语句A返回值为true时所要执行的语句
}else if(条件语句B){
    语句B;  //条件语句B返回值为false时所要执行的语句
}
...     //多个else if语句
else{
    语句C;  //所有if返回都为false时所要执行的语句
}
语句D;
1
2
3
4
5
6
7
8
9
10

示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var user = ""
        if(user=="admin"){
            console.log("用户名正确")
        }else if (user ==""){
            console.log("请输入用户名")
        }else{
            console.log("用户名错误")
        }
        console.log("我必然会被执行B")
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结果如下：
在这里插入图片描述

3、if…else…嵌套语句

多个if…else语句可进行嵌套，语法如下：

if (条件语句A){
    if (条件语句A1){
        语句A1;  //条件语句A、A1返回值都为true时所要执行的语句
    }
    else{
        语句A2;  //条件语句A返回值为true，但条件语句A1返回值为false时所要执行的语句
    }
}
else{
    语句C;  //条件语句A返回为false时所要执行的语句
}
语句D;
1
2
3
4
5
6
7
8
9
10
11
12

示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var pass = "123"
        if(pass=="123"){
            if (pass.length>=6){
                console.log("密码正确，欢迎登陆！")
            }else{
                console.log("密码强度不够，是否修改密码？")
            }
        }else{
            console.log("密码错误，请重新输入！")
        }
        console.log("我必然会被执行B")
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结果如下：
在这里插入图片描述

二、switch语句

当多个if…else连在一起使用时，可以转为使用更方便的switch结构，语法如下：

switch(表达式){
    case 值1:
        代码块1;    //当表达式返回的结果为值1时，执行代码块1
        break;      //跳出当前switch结构
    case 值2:
        代码块2;    //当表达式返回的结果为值2时，执行代码块2
        break;      //跳出当前switch结构
        
    ...             //多个case
    default:
        代码块3     //当表达式返回的结果不是上述所有值时，执行代码块3
        
}
1
2
3
4
5
6
7
8
9
10
11
12
13

示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var pass = "123"
        
        switch(pass){
            case "":
                console.log("请输入密码");
                break;
            case "123":
                console.log("密码输入正确");
                break;
            default:
                console.log("密码输入错误");
        }
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

结果如下：

在这里插入图片描述

相关阅读:
14、设计模式之命令模式（Command）
一个优秀的软件测试工程师该如何进行需求分析
《幸福之路》罗素（读书笔记）
Linux驱动开发笔记（六）：用户层与内核层进行数据传递的原理和Demo
那些SAP项目里的主流外围系统
美团MTCTF 2022 ret2libc_aarch64 pwn解
Java配置28-CentOS7下配置redis主从关系
P8611 [蓝桥杯 2014 省 AB] 蚂蚁感冒(模拟)
技术干货｜AI框架动静态图统一的思考
Audacity开源音频处理软件使用入门

原文地址：https://blog.csdn.net/WXKKang/article/details/126185141