首页 > 编程笔记 > JavaScript笔记

JS if else语句

判断语句和循环语句都是流程控制语句，判断语句是通过判断指定表达式的值来决定语句的执行流程，其中用于判断的表达式称为条件表达式，作为条件分支点，根据条件表达式的值来执行的语句称为分支语句。

根据分支语句的多少，判断语句可以包含以下几种形式：
本节教程主要介绍前 3 种判断语句，switch-case 语句下节介绍。

JS if语句

if 语句是最基本、最常用的判断流程控制语句。该语句中只有一条分支，当条件表达式的值为 true 时，执行该分支语句，否则跳过 if 语句，执行 if 语句后面的语句。

基本语法如下：

if(条件表达式){
      语句块1;
}
语句块2;

说明：
【例 1】单一条件的 if 语句。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单一条件的if语句</title>
<script>
     var x,y,temp;
     x = 10;
     y = 16;
     if(x < y){
         temp = x;
         x = y;
         y = temp;
     }
     alert("x = "+x+", y = " + y);
</script>
</head>
<body>
</body>
</html>
上述代码中的条件表达式 x<y 结果为 true，所以执行 if 语句，实现 x 和 y 值的交换，最后得到 x=16，y=10。如果 x<y 结果为 false，if 语句将不会执行，即不会交换 x 和 y 的值。

【例 2】复合条件的 if 语句。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合条件的if语句</title>
<script>
     var a = 15,b = 16;
     if(a % 3 == 0 || b > 20){
         alert("条件符合要求");
     }
     alert("a = " + a + ", b = " + b);
</script>
</head>
<body>
</body>
</html>
上述代码中的条件表达式使用逻辑运算符||将两个关系表达式连接起来构成了多条件。上述条件表达式只要任意一个关系表达式的值为 true，条件表达式即为 true，就可以在弹出的对话框中显示“条件符合要求”信息。很显然上述代码的 if 条件表达式的值为 true，所以将执行 if 语句。

JS if…else语句

if 语句只有一条分支语句，当判断语句中存在两条分支语句时，需要使用 if…else 语句。

if…else 语句的基本语法如下：

if(条件表达式){
      语句块1;
}else{
   语句块2;
}

说明：
当各个语句块只有一条语句时，上述各层中的大括号可以省略，但建议加上，这样层次更清晰。

【例 3】单一条件的 if…else 语句。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单一条件的if…else语句</title>
<script>
     var num = 6;
     if(num >= 5){
         alert("您可得到5%的折扣优惠");
     }else{
         alert("您购买了" + num + "件商品");
     }
</script>
</head>
<body>
</body>
</html>
上述代码中的 num 值为 6，所以满足 if 条件，因而执行 if 结构中的语句。如果修改 num 的值为 3，将执行 else 结构中的语句。

【例 4】复合条件的 if…else 语句。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合条件的if…else语句</title>
<script>
     var a = 15, b = 16;
     if(a % 3 == 0 && b > 20){
         alert("条件符合");
     }else{
     alert("条件不符合");
     }
</script>
</head>
<body>
</body>
</html>
上述代码中 if 语句包括了两个条件，这两个条件必须同时满足才能执行 if 结构中的语句，如果任一条件或两个条件都不满足将执行 else 结构中的语句。上述代码中由于 b=16，所以 b>20，返回 false，因而 if 结构中的条件不满足，所以最终执行 else 结构中的语句。

JS if…else if…else语句

当条件语句中存在 3 条或 3 条以上的分支语句时，需要使用 if…else if…else 语句。

if…else if…else 语句的基本语法如下：

if (条件表达式 1){
       语句块 1;
}else if(条件表达式2){
        语句块2;
}
…
else if(条件表达式n){
        语句块n;
}else{
        语句块n+1;
}

说明：
当各个语句块只有一条语句时，上述各层中的大括号可以省略，但建议加上，这样层次更清晰。

【例 5】if…else if…else 语句使用。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>if…else if…else语句使用</title>
<script>
     window.onload = function (){
         var oText = document.getElementById('text1');
         var oBtn = document.getElementById('btn1');
         oBtn.onclick = function (){
              var score = oText.value; //获取文本框中输入的成绩
              if(score < 60){ 
                  alert("成绩不理想！");
              }else if(score < 70){
                  alert("成绩及格!");
              }else if(score < 80){
                  alert("成绩中等！");
              }else if(score < 90){
                  alert("成绩良好!");
              }else{
                  alert("成绩优秀！");
              }
         };
     };
</script>
</head>
<body>
     请输入成绩：<input type="text" id="text1"/>
    <input type="button" id="btn1" value="提交"/>
</body>
</html>
上述代码中，成绩由文本框输入，因而在 JS 中，可以使用 oText.value 获得成绩，此时获得的成绩是一个字符串，为了能和数字进行比较，需要将获得的字符串成绩转换为数字，由于运算符是<，所以字符串的成绩隐式转换为数字形式的成绩。

上述代码中，判断语句有 6 条分支语句，执行代码时，首先从上往下依次执行判断语句中的条件表达式，如果条件表达式的值为 false，将执行下面的条件表达式，直到条件表达式的值为 true，此时执行该判断结构中的语句。如果所有条件表达式的值都为 false，将执行 else 结构中的语句。

代码运行后弹出对话框的语句由用户在文本框中输入的值决定，例如，在文本框中输入 89 时，输出的语句为“成绩良好！”，结果如图 1 所示。
成绩输出结果
图 1：成绩输出结果

JS if嵌套语句

在实际使用中，有时需要在 if 语句的执行语句块中再使用 if 语句，即 if 语句嵌套另外的一个完整的 if 语句。在使用 if 嵌套语句时，需要特别注意的是，默认情况下，else 将与最近的 if 匹配，而不是通过位置的缩进来匹配。为了改变这种默认的匹配方式，最好使用大括号{}来确定相互之间的层次关系，否则可能得到完全不一样的结果。

下面希望使用 if 嵌套语句实现这样的功能：如果变量 a 的值大于 0，则接着判断变量 b 的值是否大于 0。如果此时 b 的值也大于 0，则弹出对话框，显示 a 和 b 都是正整数。如果变量 a 的值小于或等于 0，则弹出对话框，显示 a 为非正整数。按照这个功能，编写了例 6。

【例 6】if 嵌套语句的使用。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>if嵌套语句的使用</title>
<script>
     var a = 9, b = -2;
     if(a > 0)
         if(b > 0)
              alert("a和b都是正整数");
    else
         alert("a是非正整数");
</script>
</head>
<body>
</body>
</html>
上述代码希望通过位置缩进来实现 else 和第一个 if 匹配，但执行的结果却发现 else 和第二个 if 匹配了，因为上述代码中，b>0 表达式为 false，如果 else 和第一个 if 匹配，此时运行结果将不会输出任何信息，但最终的结果却是弹出对话框显示“a 是非正整数”，这样的结果正是第 2 个 if 语句不满足时执行的情况。可见，else 并没有通过位置的缩进来匹配 if，而是通过最近原则与 if 匹配。

上述代码要实现预期结果，需要对第一层 if 使用大括号，修改如下所示： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>if嵌套语句的使用</title>
<script>
     var a = 9, b = -2;
     if(a > 0){
         if(b > 0)
           alert("a和b都是正整数");
     }else
         alert("a是非正整数");
    
</script>
</head>
<body>
</body>
</html>

所有教程

优秀文章