【前端从0开始】JavaSript——分支流程控制

流程控制

在任何一门程序设计语言中，都需要支持满足程序结构 化所需要的三种流程控制:
●顺序控制
●分支控制（条件控制）
●循环控制
顺序控制：在程序流程控制中，最基本的就是顺序控制。程序会按照自上而下的顺序执行。

分支流程控制

●if语句
●switch语句

if语句【重要】

分类：单分支，双分支，多分支，分支嵌套

// 单分支
if (条件表达式){
   代码段
}
// 双分支
if (条件表达式) {
    代码段1 
}else {
   代码段2
}
// 多分支
if (条件表达式1){
    代码段1
} else if (条件表达式2){
   代码段2
} else if (条件表达式3){
   代码段3
}else{
    代码段4
}

()中可以是一个值，也可以是一个表达式

// 判断成绩是否及格
// 单分支
var score = 78;
if(score>=60 && score<=100){
  console.log('及格');
}

// 双分支
if(score>=60 && score<=100){
  console.log('及格');
}else{
  console.log('不及格');
}
// 双分支 改写 三元运算符
var res = score>=60&& score<=100?'及格':'不及格';
console.log(res);

// 多分支
var score = 59;
if(score>=60 && score<=100){
  console.log('及格');
}else if(score>=0 && score<=59){
  console.log('不及格');
}else{
  console.log('输入错误！');
}

// 分支嵌套
var score = 59;
if(score>=60 && score<=100){
  if(score>=85){
    console.log('优秀');
  }else if(score>=75){
    console.log('良好');
  }else{
    console.log('中等');
  }
}else if(score>=0 && score<=59){
  console.log('不及格');
}else{
  console.log('输入错误！');
}

Switch【掌握】

switch (变量){
  case 值1: 
	代码段;
       break;
  case 值2: 
	代码段;
       break;
  ...
  default: 
	代码段;
}

（）只能是变量或值，不能是表达式

var d = new Date();
console.log(d); // 获取日期时间对象
var week = d.getDay(); // 获取星期几
switch (week) {
  case 0:
    console.log('星期天');
    break;
  case 1: 
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  case 3:
    console.log('星期三');
    break;
  case 4:
    console.log('星期四');
    break;
  case 5:
    console.log('星期五');
    break;
  case 6:
    console.log('星期六');
    break;
}

对比：什么时候用if，什么时候用switch

if：条件是一个范围 或者 是具体的值
switch：条件是一个具体的值
能够使用switch实现的判断，都可以使用if来实现
但是，能够使用if语句实现的判断，不一定能使用switch实现

案例：小游戏

<button id='btn1'>唱歌</button>
    <button id='btn2'>讲故事</button>
    <button id='btn3'>说英语</button>
</body>
<script>
    var btn = document.getElementsByTagName('button');
    for(var i=0;i<btn.length;i++){
        // console.log(btn[i]);
        btn[i].onclick = function(){
            // this 点击的是谁，获取的就是谁
            // console.log(this);
            // if(this.innerText=='唱歌'){
            //     console.log('两只老虎。。。。');
            // }else if(this.innerText=='说英语'){
            //     console.log('ABCDEFG。。。。');
            // }else if(this.innerText=='讲故事'){
            //     console.log('从前有个山。。。。');
            // }

            switch(this.innerText){
                case '唱歌':
                    console.log('两只老虎。。。。');
                    break;
                case '说英语':
                    console.log('ABCDEFG。。。。');
                    break;
                case '讲故事':
                    console.log('从前有个山。。。。');
                    break;
            }
        }
    }
</script>