JS if else语句
判断语句和循环语句都是流程控制语句，判断语句是通过判断指定表达式的值来决定语句的执行流程，其中用于判断的表达式称为条件表达式，作为条件分支点，根据条件表达式的值来执行的语句称为分支语句。
根据分支语句的多少，判断语句可以包含以下几种形式：
- if 语句；
- if…else 语句；
- if…else if…else 语句；
- switch-case 语句。
本节教程主要介绍前 3 种判断语句，switch-case 语句下节介绍。
JS if语句
if 语句是最基本、最常用的判断流程控制语句。该语句中只有一条分支，当条件表达式的值为 true 时，执行该分支语句，否则跳过 if 语句，执行 if 语句后面的语句。
基本语法如下：
语句块1;
}
语句块2;
说明：
- 条件表达式：必须放在圆括号中，条件表达式为关系表达式或逻辑表达式，取值为 true 或 false。 注意：对判断语句，条件表达式的真值会自动转换为 true，假值自动转换为 false；
- 语句块 1：当条件表达式的值为 true 时，执行该语句块；
- 语句块 2：当条件表达式的值为 false 时，流程跳过 if 语句，执行语句块 2。当语句块 1 的代码只有一行时，也可以省略大括号{}。
【例 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 语句的基本语法如下：
语句块1;
}else{
语句块2;
}
说明：
- 条件表达式：取值情况和 if 语句完全相同；
- 语句块 1：当条件表达式的值为 true 时，执行该语句块代码；
- 语句块 2：当条件表达式的值为 false 时，执行该语句块代码。
当各个语句块只有一条语句时，上述各层中的大括号可以省略，但建议加上，这样层次更清晰。
【例 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 语句的基本语法如下：
语句块 1;
}else if(条件表达式2){
语句块2;
}
…
else if(条件表达式n){
语句块n;
}else{
语句块n+1;
}
说明：
- 条件表达式 1～n：取值情况和 if 语句完全相同；
- 语句块 1～n：当条件表达式 1～n 的值为 true 时，执行对应的语句块；
- 语句块 n+1：当条件表达式 n 的值为 false 时，执行该语句块。
当各个语句块只有一条语句时，上述各层中的大括号可以省略，但建议加上，这样层次更清晰。
【例 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>
湘公网安备 43102202000103号