美文网首页
JavaScript中条件语句的使用

JavaScript中条件语句的使用

作者: 暖A暖 | 来源:发表于2020-06-01 09:44 被阅读0次

    什么是条件语句

    JavaScript 语言中,条件语句(if 语句)常用于基于不同条件执行不同的动作。简单来讲就是判断给出的某个条件是否是正确的,如果条件正确要如何做,条件错误要如何做。举一个例子,例如现在有一个变量 age,给定一个条件语句为 “age是否大于18”,如果大于18 则可以玩游戏,否则不可以玩游戏。

    var age = 20;
    if(age > 18){
        console.log("你可以玩游戏哟");
    }else{
        console.log("未成年不可以玩游戏");
    }
    

    在 JavaScript 中,我们可以使用的 if 条件语句有如下几种:

    • if 语句:当指定条件为 true 时,使用该语句来执行代码。

    • if-else 语句:当指定条件为 true 时执行 if 后面的代码,为false执行 else 后面的代码。

    • else if 语句:当要指定多个条件时,可以在 if 语句后面加 else if 语句。

    if 语句

    if 语句是最基本的条件语句,规定假如条件为 true 时,则执行花括号 {} 中的代码块。

    语法如下所示:

    if (condition)
    {
        // 条件为 true 时要执行的代码块
    }
    

    其中 condition 表示条件,并且 if 只能小写,后面必须接英文的花括号{},如果不按照语言要求写代码会报错。

    示例:

    例如我们给定一个条件,当变量 num 大于10,输出“嘻嘻嘻”,我们可以这样写:

    var num = 15;
    if(num > 10){
        console.log("嘻嘻嘻");
    }
    

    在 VSCode 中执行上述代码,输出结果如下:

    执行代码时,我们直接在 .js 文件中编写好代码,在 VSCode 的终端中使用 node test.js 命令来执行这段代码,其中 test.js 是文件名。

    如果我们是在 HTML 中编写 JavaScript 代码,则需要将 JavaScript 代码写在 <script> 标签中,并且在浏览器中打开这个 HTML 文件,例如下面这段代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS_侠课岛(9xkd.com)</title>
    </head>
    <body>
      <div>
        <p>如果时间早于某一个时刻,会获得问候 "Congratulations!"。</p>
        <p id="if"></p>
      </div>
      <script>
        if(new Date().getHours() < 18) {
          document.getElementById("if").innerHTML = "Congratulations!";
        }
      </script>
      </body>    
    </html>
    

    直接在浏览器中打开这个文件,页面会显示如下内容:


    if-else语句

    if-else 语句规定假如条件为 true 时,执行 if 后面的花括号中的代码块,为 false 时则执行 else 后面花括号中的代码块。

    语法如下所示:

    if (condition) {
        // 条件为真时要执行的代码块
    }else{
        // 如果条件为false,则执行的代码块
    }
    

    其中condition 是条件语句,else 后面不需要接条件语法。这也好理解,例如打个比方说,我今年大于18岁,那么大于18岁就是一个条件if语句,只要不满足这个条件,不管是等于还是小于18岁,都是 else

    示例:

    同样是一个关于时间的例子,根据当前时间是否符合标准来打招呼,12点之前是”Good morning“,12点之后是”Good afternoon“:

    var hour = new Date().getHours();  // 获取当前时间(小时)
    
    var greet;
    if(hour < 12) {
        greet = "Good morning";
    } else {
        greet = "Good afternoon";
    }
    console.log("现在时间为:" + hour);
    console.log("打个招呼吧:" + greet);
    

    输出:


    else if 语句

    else if 语句和if 语句类似,后面也要接一个条件,例如if后面接的是条件1,else if 后面就接条件2,else 后面就是既不满足条件1,又不满足条件2 的其他情况。

    语法如下:

    if (condition1) {
        // condition1 为 true 时,要执行的代码块
    } else if (condition2) {
        // 当 condition1 为 false 而 condition2 为 true,则执行此代码块
    } else {
        // 当 condition1 和 condition2 为 false,则执行这个代码块
    }
    
    示例:

    例如学生食堂早上8点吃早饭,中午12点吃午饭,晚上18点吃晚饭,其他时间不吃饭:

    var hour = new Date().getHours();  // 获取当前时间(小时)
    
    if(hour == 8) {
        console.log("现在的时间为:" + hour + "点, 该吃早饭啦!");
    } else if( hour == 12) {
        console.log("现在的时间为:" + hour + "点, 该吃午饭啦!");
    } else if( hour == 18){
        console.log("现在的时间为:" + hour + "点, 该吃晚饭啦!");
    }else{
        console.log("现在的时间为:" + hour + "点, 不是吃饭时间!");
    }
    

    执行代码,输出:

    现在的时间为:14点, 不是吃饭时间!
    

    动手小练习

    1. 一年级三班昨天考试,请根据他们的成绩,来给他们打等级,成绩为100的等级为S、成绩小于100大于80等级为A,成绩小于80大于60等级为B,成绩小于60等级为B。

    2. 现有一个变量height,当变量值大于100,输出“小姐姐,要注意控制饮食哟”,小于100大于90,输出”小姐姐,标准身材呢“,小于90,输出”小姐姐,太瘦了要多吃点!“。

    链接:https://www.9xkd.com/

    相关文章

      网友评论

          本文标题:JavaScript中条件语句的使用

          本文链接:https://www.haomeiwen.com/subject/mzkjzhtx.html