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

清风不渡

已于 2022-08-05 21:42:45 修改

阅读量237

点赞数

分类专栏：前端研习录文章标签：前端 javascript vue.js

于 2022-08-05 21:20:51 首次发布

本文链接：https://blog.csdn.net/WXKKang/article/details/126185141

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

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

版权声明

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

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

一、if语句

1、if语句

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

if (表达式){
    语句A；
}
语句B;

如果表达式返回的布尔值为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>

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

2、if…else…语句

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

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

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

if (条件语句A){
    语句A;  //条件语句A返回值为true时所要执行的语句
}else if(条件语句B){
    语句B;  //条件语句B返回值为false时所要执行的语句
}
...     //多个else if语句
else{
    语句C;  //所有if返回都为false时所要执行的语句
}
语句D;

示例如下：

<!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>

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

3、if…else…嵌套语句

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

if (条件语句A){
    if (条件语句A1){
        语句A1;  //条件语句A、A1返回值都为true时所要执行的语句
    }
    else{
        语句A2;  //条件语句A返回值为true，但条件语句A1返回值为false时所要执行的语句
    }
}
else{
    语句C;  //条件语句A返回为false时所要执行的语句
}
语句D;

示例如下：

<!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>

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

二、switch语句

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

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

示例如下：

<!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>