JS if else语句:条件判断语句

admin   ·   发表于 1个月前   ·   javascript

条件判断语句是程序开发过程中一种经常使用的语句形式,和大部分编程语言相同,JavaScript 中也有条件判断语句。所谓条件判断,指的是程序根据不同的条件来执行不同的操作,例如根据年龄来显示不同的内容,根据布尔值 true 或 false 来判断操作是成功还是失败等。

JavaScript 中支持以下几种不同形式的条件判断语句:
  • if 语句;
  • if else 语句;
  • if else if else 语句;
  • switc case 语句。

本节我们主要来介绍一下 if、if else、if else if else 语句的使用,switch case 语句会在下节为大家详细介绍。

if 语句

if 语句是 JavaScript 中最简单的条件判断语句,语法格式如下:

if(条件表达式){
    // 要执行的代码;
}

当条件表达式成立,即结果为布尔值 true 时,就会执行{ }中的代码。

示例代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JavaScript</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. var age = 20;
  10. if(age >= 18){ // 如果 age >= 18 的结果为 true,则执行下面 { } 中的代码
  11. alert("adult");
  12. }
  13. </script>
  14. </body>
  15. </html>
运行结果如下图所示:

if 语句
图:if 语句

if else 语句

if else 语句是 if 语句的升级版,它不仅可以指定当表达式成立时要执行的代码,还可以指定当表达式不成立时要执行的代码,语法格式如下:

if(条件表达式){
    // 当表达式成立时要执行的代码
}else{
    // 当表达式不成立时要执行的代码
}

示例代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JavaScript</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. var now = new Date(); // 获取当前的完整日期
  10. var dayOfWeek = now.getDay(); // 获取一个 0-6 之间的数字,用来表示当前是星期几,0 表示星期日、1 表示星期一、以此类推
  11. if (dayOfWeek > 0 && dayOfWeek < 6) { // 判断:如果当前是星期一到星期五中的一天,则输出“Have a nice day!”,若不是则输出“Have a nice weekend!”
  12. alert("Have a nice day!");
  13. } else {
  14. alert("Have a nice weekend!");
  15. }
  16. </script>
  17. </body>
  18. </html>
运行结果如下图所示:

if else 语句
图:if else 语句

if else if else 语句

if 和 if else 语句都只有一个条件表达式,而 if else if else 语句是它们更高级的形式,在 if else if else 语句中允许您定义多个条件表达式,并根据表达式的结果执行相应的代码,语法格式如下:

if (条件表达式 1) {
    // 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
    // 条件表达式 2 为真时执行的代码
}
...
  else if (条件表达式N) {
    // 条件表达式 N 为真时执行的代码
} else {
    // 所有条件表达式都为假时要执行的代码
}

提示:if else if else 语句在执行过程中,当遇到成立的条件表达式时,会立即执行其后{ }中的代码,然后退出整个 if else if else 语句,若后续代码中还有成立的条件表达式,则不会执行。

示例代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JavaScript</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. var now = new Date(); // 获取当前的完整日期
  10. var dayOfWeek = now.getDay(); // 获取一个 0-6 之间的数字,用来表示当前是星期几,0 表示星期日、1 表示星期一、以此类推
  11. if(dayOfWeek == 0) { // 判断当前是星期几
  12. alert("星期日")
  13. } else if(dayOfWeek == 1) {
  14. alert("星期一")
  15. } else if(dayOfWeek == 2) {
  16. alert("星期二")
  17. } else if(dayOfWeek == 3) {
  18. alert("星期三")
  19. } else if(dayOfWeek == 4) {
  20. alert("星期四")
  21. } else if(dayOfWeek == 5) {
  22. alert("星期五")
  23. } else {
  24. alert("星期六")
  25. }
  26. </script>
  27. </body>
  28. </html>
运行结果如下图所示:

if else if else 语句
图:if else if else 语句

注意事项

使用嵌套 if else 时,如果只有一行语句,也应该使用大括号包裹起来,避免条件歧义。

例如,下面嵌套 if else 就容易引发误解:
  1. if(0)
  2. if(1)
  3. console.log(1);
  4. else
  5. console.log(0);
针对上面代码,JavaScript 解释器将根据就近原则,按如下逻辑层次进行解释:
  1. if(0)
  2. if(1)
  3. console.log(1);
  4. else
  5. console.log(0);
因此使用大括号可以避免很多问题:
  1. if(0){
  2. if(1) console.log(1);
  3. }else{
  4. console.log(0);
  5. }
0 Reply   |  Until 1个月前 | 16 View
LoginCan Publish Content