流程控制

流程控制不是JS独有所有的编程语言都存在流程控制，控制代码执行的顺序或加载流程

扫描二维码关注公众号，回复： 13303854 查看本文章

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

顺序结构：默认代码从上到下执行顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。
分支结构（选择结构） if switch
循环结构 for while及do-while for-in
关键字：continue break

选择（分支）结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

if语句

1.单分支 if

基本语法

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}

可以把大括号中的代码成为判断体

条件可以是表达式也可以单个数据
判断体中代码只有一行可以省略{}

var score = 70;
// 条件是表达式
if (score >= 60) {
    console.log("吃顿大餐，蛋炒饭多加两个蛋~~~");
    console.log("晚上再吃一顿");
}

// 条件是单个数据
if (0) {
    console.log("当前这个数据是真的");
}

//判断体中代码只有一行可以省略{}
var score1 = 60;
if (score1 >= 65) console.log("考试及格了");

console.log("哈哈");

2.双分支 if-else

基本语法：if(条件){条件成立执行的段}else{条件不成立执行的代码段}

// 如果年纪大于4去幼儿园玩泥巴
var age = 3;
if (age >= 4) {
    console.log("去幼儿园玩泥巴~~~");
} else {
    console.log("在家玩泥巴~~~");
}



// 判断闰年还平年
// 闰年：能被4整除并且不能被100整除，   或者能被400整除
var year = prompt("请输入年份");
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
    alert("闰年");
} else {
    alert("平年");
}

3.多分支 if-else if

基本语法 if(条件){条件成立执行的段}else if(条件成立执行的段)....else{以上条件都不成立执行的代码段}
- else可以省略

  if (score >= 80 && score <= 100) {
            console.log("优秀");
        } else if (score >= 70 && score < 80) {
            console.log("良好");
        } else if (score >= 60 && score < 70) {
            console.log("中等");
        } else if (score >= 0 && score < 60) {
            console.log("不及格");
        } else {
            console.log("hello");
        }



        // 判断可以嵌套  {}中可以放任意代码段
        var test = 100;
        if(test > 50){
            console.log("大于50");
            if(test < 200){
                console.log("小于200");
            }
        }

switch语句

基本语法

switch(值){
	case 比较值：条件成立执行的代码段;break;
	case 比较值：条件成立执行的代码段;break;
	case 比较值：条件成立执行的代码段;break;
	...
	default:以上条件都不成立执行的代码段
}

switch ：开关转换， case ：小例子选项
 关键字 switch 后面括号内可以是表达式或值，通常是一个变量
 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
 switch 表达式的值会与结构中的 case 的值做比较
 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码
执行结束
 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
5. 分支流程控制 switch 语句
5.1 语法结构
注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

当前值和 case后边对应的值进行比较(绝对比较)，不同数据类型一定不相等
case穿透：当前case对应的情况成立，执行后边的代码段，会将下边case对应的代码段也执行，防止case穿透：在当前代码段结束加break; 结束代码执行

// 80 - 100 优秀  70 - 80 良好   60-70 中等   60以下 不及格
var score = 20;
switch (parseInt(score / 10)) {
    case 10:
        console.log("优秀");
        break;
    case 9:
        console.log("优秀");
        break;
    case 8:
        console.log("优秀");
        break;
    case 7:
        console.log("良好");
        break;
    case 6:
        console.log("中等");
        break;
    default:
        console.log("不及格");
}
 <script>
        var score = parseFloat(prompt('请输入年龄'));
        // console.log(typeof score);
            switch(parseInt(score / 10)){
             case 10:
                 console.log("长寿");
                 break;
                 case 9:
                 console.log("长寿");
                 break;
                 case 8:
                 console.log("老年人");break;
                 case 7:
                 console.log("老年人");break;
                 case 6:
                 console.log("中老年");break;
                 case 5:
                 console.log("中年");break;
                 case 4:
                 console.log("中年");break;
                 case 3:
                 console.log("青年");break;
                 case 2:
                 console.log("青年");break;
                 case 1:
                 console.log("少年");break;
                 case 0:
                 console.log("幼年");break;
                
        }

if和switch区别：

注意区别：if判断可以解决js中所有的判断情况（条件是表达式）

switch属于值的比较，判断情况相对简单

简单计算器案列

  <div id="calculate">
        输入一个数：<input type="text"><br>
        选择运算符：<select name="" id="">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <br>
        输入一个数：<input type="text"><br>
        运算后结果：<input type="text">
        <button>运算</button>
    </div>

    <script>
        // 获取元素
        var calculate = document.getElementById("calculate"),
            inputs = calculate.getElementsByTagName("input"),
            sel = calculate.getElementsByTagName("select")[0],
            btn = calculate.getElementsByTagName("button")[0];
        // 绑定事件
        btn.onclick = function () {
            // 获取输入框的值
            var oneVal = inputs[0].value;
            var twoVal = inputs[1].value;
            var char = sel.value;
            console.log(oneVal, twoVal, char);

            // 判断
            // if(char == "+"){
            //     inputs[2].value = parseFloat(oneVal) + parseFloat(twoVal);
            // }else if(char == "-"){
            //     // 存在隐式转换
            //     inputs[2].value =  oneVal - twoVal;
            // }else if(char == "*"){
            //     // 存在隐式转换
            //     inputs[2].value =  oneVal * twoVal;
            // }else if(char == "/"){
            //     // 存在隐式转换
            //     inputs[2].value =  oneVal / twoVal;
            // }

            switch (char) {
                case "+":
                    inputs[2].value = parseFloat(oneVal) + parseFloat(twoVal);
                    break;
                case "-":
                    inputs[2].value = parseFloat(oneVal) - parseFloat(twoVal);
                    break;
                case "*":
                    inputs[2].value = parseFloat(oneVal) * parseFloat(twoVal);
                    break;
                case "/":
                    inputs[2].value = (parseFloat(oneVal) / parseFloat(twoVal)).toFixed(2);
                    break;
            }

        }
    </script>

javascript流程控制语句之选择结构