前端基础(六)_流程控制语句(if、if-else、if-else嵌套、switch)

news2024/11/8 3:27:05

流程控制语句主要分为 :

顺序结构：即按顺序执行代码 ;
条件选择结构 ( 分支语句 )：包括 if-else 以及 switch;
循环结构：包括 for循环，while，do-while,for-in 等;
其他语句： break 和continue。

一、流程控制之分支语句

条件选择结构又叫分支语句，主要包括if-else、switch等，通过条件判断，有选择性的执行某段代码

1.1、if

if 即如果，就是假设一个条件，如果条件成立，就做某一个操作，即如果怎么样就会怎么样。
语法:if（条件）{ 条件成立执行 }
例1：如果年龄大于 7 岁，就上学

<!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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var age = 8;
    if (age > 7) { console.log("上学"); }
    //{}可以省略，省略了if就只能控制()后面的第一行语句。虽然可以省略，但是我们
    //建议每次都加上，这样代码结构逻辑更清晰
    if (age > 7) console.log("上学");// 控制台输出"上学"
    alert(1);// 不管条件是否成立都会执行，因为这行代码不受if的控制
  </script>
</body>

</html>

在这里插入图片描述

1.2、if-else

if-else是在if的基础上加了一个条件不成立时要做的操作，即条件成立做某个操作，条件不成立做某个操作。
语法：if( 条件 )｛条件成立做的事情｝else｛条件不成立做的事情｝
例1：如果成绩大于60就是及格，反之不及格

<!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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var s = 70;
    if (s > 60) {
      //条件成立执行的代码
      console.log('及格');
    } else {
      //条件不成立执行的代码
      console.log('不及格');
    }
  </script>
</body>

</html>

在这里插入图片描述

1.3、if-else嵌套

if-else 能用于一个条件的成立和不成立，但是如果问题存在多个假设就不能够满足要求，如成绩大于 90 为优秀，80-90 为良好，70-80 为还行，60-70 为及格，60 以下为不及格，像这种情况就没有办法用if-else去实现，这个时候就需要用到 if-else 嵌套。
语法：if( 判断条件 ){ 条件成立执行的代码 }else if( 判断条件 ){ 条件成立执行的代码 }else{ 以上条件都不成立时执行 }
例1：

<!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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    // if-else 可以一直嵌套，只要有 else 前面肯定有 if
    var a = 85;
    if (a > 90) {
      alert("优秀");
    } else if (a > 80) {
      alert("良好");
    } else if (a > 70) {
      alert("还行");
    } else if (a > 60) {
      alert("及格")
    }
  </script>
</body>

</html>

在这里插入图片描述

1.4、switch

switch一般用于假设的个数有限，并且是同等级的关系，相对于if来说，结构更清晰。使用该语句来选择多个代码块之一来执行。
例1：

<!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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    // switch（选择项）根据这个选择项（确定的数据）选择要执行的代码
    var s = "+";
    switch (s) {
      case "+": alert(10 + 10); break;
      case "-": alert(10 - 10); break;
      case "*": alert(10 * 10); break;
      default: alert("都没有匹配到");
    }
  </script>
</body>

</html>

在这里插入图片描述
上面代码中，将所有可能出现的情况都使用case列举出来，变量s会去匹配对应的case，匹配到了以后执行case后面的代码，如果所有的case都匹配不到则会执行default后面的代码。
上面代码中，所有的case后面都会加一个关键字break，break的作用是防止穿透，如果不加break，当匹配到其中一个case以后，从当前case开始，后面代码不会再进行匹配，直接执行。
如果需要用到判断执行某些代码，可以使用if-else和switch，一般情况下，如果条件明确，并且是一些简单字符，数字等，会选择使用switch。