二、JS 基础知识之流程控制(3)--- 分支语句详解

76 阅读3分钟

三大流程控制语句

最常用的三种流程控制语句及流程图如下所示:

image.png

image.png

表达式和语句

表达式在某些情况下也可以看作是语句,其区别如下:

image.png

分支语句

分支语句可以有选择性地执行符合条件的代码:

image.png

(1)if 分支语句

单分支使用方法:

  <body>
    <script>
      if (5 > 3) {
        console.log('真')
      }
    </script>
  </body>

image.png

当括号内的条件为真(true)时,进入大括号里执行相应的代码;如果小括号内的结果不是布尔类型时,就会发生隐式转换,转为布尔类型:

  <body>
    <script>
      let score = prompt('请输入成绩:')
      if (score) {
        console.log('输入的成绩有效')
      }
    </script>
  </body>

image.png

“87” 为真,除了我们前面说过的那 5 种情况,其余均为真,所以会执行大括号里的内容

双分支 if 语句:

image.png

示例:判断输入的年份是平年还是闰年,能被 4 整除但不能被 100 整除,或者能被 400 整除的年份是闰年

  <body>
    <script>
      let year = prompt('请输入年份:')

      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
        console.log(`${year} 是闰年`)
      } else {
        console.log(`${year} 是平年`)
      }
    </script>
  </body>

image.png

多分支 if 语句:

image.png

先判断条件 1 ,如果条件 1 满足的话就去执行代码 1 ,后面的条件都不执行了,如果条件 1 不满足就向下依次判断,直到找到满足条件的语句;如果判断完后,所有条件都不满足,则执行 else 里的代码 n

示例:根据输入的成绩,输出等级

  <body>
    <script>
      let score = prompt('请输入成绩:')

      if (score > 0 && score < 60) {
        console.log(score + ' 不及格')
      } else if (score > 60 && score < 75) {
        console.log(score + ' 良好')
      } else if (score > 75 && score <= 100) {
        console.log(score + ' 优秀')
      } else {
        console.log('输入成绩无效,请重新输入!')
      }
    </script>
  </body>

image.png

(2)三元运算符

三元运算符也叫 三元表达式 ,比 if 双分支的写法更简单,一般用来取值

配合使用,语法:条件 ? 满足条件执行的代码 :不满足条件执行的代码

示例:

image.png

比较 num1 和 num2 的值,结果为 true ,所以最终将 num1 的值 30 赋给 re

涉及比较运算符时,要注意数据类型的转化:

image.png

用户输入的 num1 和 num2 是字符串类型,编译器在处理时,先将 “5” 与 “1” 的 ASCII 码进行比较,“5” 的 ASCII 码大于 “1” 的 ASCII 码,所以最终输出的最大值是 “5”

正确写法 如下:先将输入的字符串类型转换成数值型

image.png

日期、时间等数值前通常需要 补零 ,当数值小于 10 时,需要在原数值前补零,其它数值原样输出

  <body>
    <script>
      let time = prompt('请输入时间:')

      time = time < 10 ? '0' + time : time
      console.log(time)
    </script>
  </body>

image.png

(3)switch 语句

switch 语法:

image.png

先找到和小括号里 “数据” 全等 的 case 值,然后执行对应的代码,如果没有找到全等的值, 则执行 default 里面的代码,通常配合 break 关键字使用,否则会造成 case 穿透

switch 语句一般用于 等值 判断,不适合于区间判断

示例:写一个简单的计算器,用户输入两个数字,然后选择 +、-、*、/ 中的任意一个,计算出它的结果

image.png