JS中的条件语句

sherlockkid7
90 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

前言

昨天写了一篇文章，使用了switch 语句，平时用的不是很多，相关知识记得模模糊糊，基本都是使用if语句来实现条件判断。今天总结复习一下条件语句的相关知识。

条件语句

JavaScript中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行。

流程控制语句： 条件判断语句（if语句等）、条件分支语句（switch 语句）、循环语句

if 语句

if语句在执行时会先对条件表达式进行求值，如果该值不是Boolean类型的值，JS会自动进行转换；只有当条件表达式为true时，才会执行if后的语句

if（条件表达式）{
  //执行语句
}

image.png

if…else语句
  • 如果条件表达式为true，则执行if后的语句；
  • 如果条件表达式为false，则执行else后的语句；
if (条件表达式) {
   // 语句1
}else{
   // 语句2
}

image.png

if … else if … else语句
  • 如果值为true，则执行当前语句
  • 如果值为false，则继续向下判断
  • 如果所有条件都不满足，则执行else后面的语句

在该语句中只有一个代码块会被执行，一旦代码块执行了，则直接结束语句。

if(条件表达式1){
   // 语句1
}else if(条件表达式2){
   // 语句2
}else if(条件表达式3){
   // 语句3
}else{
   // 语句4
}

image.png

小案例

在页面的输入框输入成绩，按下enter键：
当成绩为100时，输出“奖励100元”
当成绩为[80-99]时，输出“奖励50元”
当成绩为[60-80)时，输出“奖励一本试卷”
当成绩小于60时，输出“奖励爸妈混合双打”。

const scoreDiv = document.getElementById('score');
scoreDiv.addEventListener('keydown', event => {
    //keyCode为13时，表示是enter键
    if (event.keyCode === 13) {
    const score = scoreDiv.value;
    //输入大于100或小于0，又或是非数字的值,空值都是不符合要求的
    if (score > 100 || score < 0 || score.trim() == '' || isNaN(score)) {
      alert("请输入0~100之间的数字~");
    }else {
      if (score == 100) {
        alert("奖励100元");
      } else if (score >= 80 && score <= 99) {
        alert("奖励50元");
      } else if (score >= 60 && score < 80) {
        alert("奖励一本试卷");
      } else {
        alert("奖励爸妈混合双打");
      }
    }
   }
})
switch语句

在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较（数据类型和值的双重判断）

  • 如果比较结果为true，则执行当前case后面的代码块。
  • 如果比较结果为false，则继续向下比较

和if … else if … else语句相似，多个代码块中选择要执行的其中一个；switch语句更适用于多条分支使用同一条件的情况。（ps: 相关的案例可以查看这篇文章）

avatar
文章
阅读
粉丝