5.16 js基础语法 （if-else switch while ）

回顾：

• 函数 function name（a,b）{}
• 作用域 全局变量 局部变量
• 变量提升 变量和函数的声明会提升到当前程序的顶部

目标:

• if…else…
• switch

流程控制的概念

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制代码按照一定结构顺序来执行

流程控制主要有三种结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVXTo4t8-1621118789915)(.\imgs\图片11.png)]：

顺序结构、分支结构、循环结构

为什么要有分支结构？

• 现实世界中，我们在做某些事情的时候是有前提条件的，例如：我明天去买一辆法拉利，前提是我今晚要中五百万
  • 也就是说：如果我今晚中了五百万，明天就去买法拉利，没中的话就不买

一、 If…Else 语句

条件语句用于基于不同条件执行不同的动作。

写代码时，经常会需要基于不同判断执行不同的动作。我们可以在代码中使用条件语句来实现这一点。

在 JavaScript 中，我们可使用如下条件语句：

• 使用 if 来规定要执行的代码块，如果指定条件为 true,才会执行{}中的代码
• 使用 else if 来规定要测试的新条件，如果第一个条件为 false
• 使用 else 来规定要执行的代码块，如果相同的条件为 false

1.1、if 语句

请使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

• 1.if结构语法：if(条件 true/false){ 条件成立时需要执行的代码 }
• 2.if结构补充说明：
  • 1.大括号中可以是任何代码，不限数量
  • 2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风
• 3.注意点:小括号中的条件可以是哪些呢
  • (1)关系表达式：结果一定是布尔类型
  • (2)布尔类型的值：true和false
  • (3)其他表达式和值：都会先转换成布尔类型再判断真和假

if (条件) {
    //如果条件为 true 时执行的代码
} 

//1.默认情况下，代码是从上往下执行的（顺序结构）
    console.log ( "我今天考试了" );
    console.log ( "我回家了" );
    console.log ( "爸爸打了我一顿" );
    console.log ( "我睡觉了" );

    //需求：考试不及格爸爸才打我，及格了就不打

注意：if 使用小写字母。大学字母（IF 或 If）会产生 JavaScript 错误。

1.2、else 语句

使用 else 语句来规定假如条件为 false 时的代码块。

• 1.if-else结构语法:用于两种互斥的条件判断

  • 例如：如果(if)我的钱超过100块就点外卖(也就是说钱>=100)，否则(else)不点（也就是说钱<100）

• 2.if-else结构注意点

  if大括号中的代码与else大括号的代码一定会执行一个，不会同时执行

  if可以单独存在,else不能单独存在,必须和if同时存在

  if-else语句的作用主要就是为了提高代码的运行效率,虽然可以用两个if语句来代替if-else语句，但是两个if语句需要判断两次，而if-else只需要判断一次

if (条件) {
   // 条件为 true 时执行的代码块
} else { 
   // 条件为 false 时执行的代码块
}
 //需求：(1)如果不及格，爸爸就打我 (2)如果及格，爸爸给我买奥迪
//1.用if实现
//2.if-else结构：用于两个互斥的条件
    //优点：只需要一次判断
    /*语法

---

1.3、else if 语句

请使用 else if 来规定当首个条件为 false 时的新条件。

2.注意点：

• (1) 必须以if开头，中间的else if可以是多个，末尾的else可以省略（一般都不会省略）
• (2) 语句中所有的大括号中的代码只会执行其中一个，不会执行多个

if (条件 1) {
    //条件 1 为 true 时执行的代码块
} else if (条件 2) {
    //条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    //条件 1 和条件 2 同时为 false 时执行的代码块
}

 //需求：(1)如果不及格，爸爸就打我 (2)如果60-70，爸爸给我买奥迪 （3）如果70-80分，爸爸给我买保时捷
      //(4)如果超过80分，爸爸给我买法拉利

1.4、三元表达式

三元运算符语法

• 三元运算符： ?:

• 三元表达式：

  //表达式?代码1：代码2
  

  • 1.如果表达式成立则执行代码1，否则执行代码2
  • 2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个

• 三元运算符做的事和if-else类似，只是代码更简洁

//if-else语句
 if(num1 > 0){
        console.log ( "哈哈" );
     }else{
         console.log ( "呵呵" );
     }
//怎么改成三元不等式？
 if(num2 > 0){
         res2 = num2 + 1;
     }else{
         res2 = num2 - 1;
     }

二、Switch 语句

用于基于不同条件执行不同动作。

使用 switch 语句来选择多个需被执行的代码块之一。

2.1、语法：

switch(表达式){
    case 值1:
        //表达式的结果 === 值1，需要执行的代码
        break;
    case 值2:
        //表达式的结果 === 值2，需要执行的代码
        break;
    case 值3：
        //表达式的结果 === 值3，需要执行的代码
        break;
    .......
    default:
        表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
        break;
} 

• 计算一次 switch 表达式
• 把表达式的值与每个 case 的值进行对比
• 如果存在匹配，则执行关联代码

注意事项

• 1.表达式的结果要和值一定是全等的关系=== (switch case使用的是严格比较)

• 2.break作用：结束该switch语句，所以一般情况下要加上，如果不加上则会发生穿透

  • 穿透：从上一个case代码快执行到下一个case代码快
  • break关键字的作用就是防止穿透

• 3.default语句可以写在任何地方，也可以省略，但是一般写在最后，这是一种代码规范

2.2、break 关键词

• 如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。此举将停止代码块中更多代码的执行以及 case 测试。如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。
• break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。
• 不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

//示例：用户输入学科编号，告诉用户学习什么学科  1-前端  2-PHP  3-java  4-UI
  var subject= +prompt("请输入您要报名的学科编号，1-前端  2-PHP  3-java  4-UI");
switch (subject){
    case  1:
        alert("恭喜你选择了2020年最有钱途的学科！");
        break;
    case  2:
        alert("选择了PHP，臭流氓!");
        break;
    case  3:
        alert("选择了Java，请问植发多少钱一根？");
        break;
    case  4:
        alert("未来的UI视觉交互设计师");
        break;
    default :
        alert("脑子有包");
        break;
}

2.3、default 关键词

default 关键词规定不存在 case 匹配时所运行的代码：

switch (new Date().getDay()) {    case 6:        text = "今天是周六";        break;     case 0:        text = "今天是周日";        break;     default:         text = "期待周末~";} 

其他情况:不同的 case 来使用相同的代码。

switch (new Date().getDay()) {    case 4:    case 5:        text = "周末快到了：）";        break;     case 0:    case 6:        text = "今天是周末~";         break;    default:         text = "期待周末！";} 

    /**合理穿透：当存在多种值需要执行相同代码时使用穿透可以节省代码     * 用户输入某一个月份，告诉用户这个月份属于什么季节     * 12，1，2 冬季     * 3，4，5 春季     * 6，7，8 夏季     * 9，10，11 秋季     */    var month = prompt("请输入月份");    switch (month){        case 12:        case 1:        case 2:            alert("冬季");            break;        case 3:        case 4:        case 5:            alert("春季");            break;        case 6:        case 7:        case 8:            alert("夏季");            break;        case 9:        case 10:        case 11:            alert("秋季");            break;        default:            alert("请输入阳间的月份？");            break;    }

三种分支结构语法总结

• 原则上，三种分支结构语句之间可以互转，只不过每一种分支结构语句适用场景不一样

• if分支结构：适合条件范围判断

  • 最常用：if-else 两种互斥条件判断

• switch-case 适合做固定值匹配

• switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。

• 当分支比较少时，if… else语句的执行效率比 switch语句高。

• 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

• 三元表达式： 比if-else代码更简洁，但是代码量较多时易读性变差

四、练习题：

1、定义一个方法，接受一个表示年份的整数作为参数，如果该年份时闰年，则控制台输出“xxxx年二月份有29天”

2、编写一个“个人所得税的计算器”函数，接受一个参数表示一个工资值，方法最终返回该工资值应该缴纳个人所得税金额，假设个人所得税计算标准如下：（作业）

5000元以下部分免征

5000-9000 10%

9000以上 20%

一、for循环

循环可多次执行代码块。

• for - 多次遍历代码块
• for/in - 遍历对象属性
• while - 当指定条件为 true 时循环一段代码块
• do/while - 当指定条件为 true 时循环一段代码块

1.1、for 循环

for(初始化变量; 条件表达式; 操作表达式 ){    //循环体}

名称	作用
初始化变量	通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

for 循环是在创建循环时经常使用的工具。

for (语句 1; 语句 2; 语句 3) {     //要执行的代码块}       /*执行步骤            1.执行代码1（声明循环变量）            2.判断代码2 （循环条件）                2.1 成立，执行循环体代码。                    执行完毕之后会执行代码3（循环变量自增），重复步骤2                2.2 不成立，结束循环，执行大括号后面的代码         */

• 语句 1 在循环（代码块）开始之前执行。
• 语句 2 定义运行循环（代码块）的条件。
• 语句 3 会在循环（代码块）每次被执行后执行。

var text = "";var i;for (i = 0; i < 5; i++) {  text += "The number is " + i + "<br>";}document.getElementById("demo").innerHTML = text;

• 语句 1 在循环开始之前设置了一个变量（var i = 0）。
• 语句 2 定义运行循环的条件（i 必须小于 5）。
• 语句 3 会在代码块每次执行之后对值进行递增（i++）。

for循环好处及注意点

• 好处：循环变量的声明与循环变量自增在一个小括号中，可以更好的避免死循环
• 注意点：原则上语句1，语句2，语句3可以是任意代码，但是不建议乱写，因为会导致死循环
• 一定要加上循环迭代
• 语句1：通常是定义循环变量
• 语句2：条件表达式
• 语句3：通常都是循环变量自增/自减（视需求而定）

//求最大值与最小值        //请用户输入5个数, 将最大的那个数打印出来        /*         擂台思想 ： 三步法            1.声明空擂主 : （第一次挑战者无条件坐擂主）        2.遍历挑战者        3.依次和擂主PK         */        //1.声明空擂主        var max = -Infinity; //第一个挑战者一定要比默认擂主大，保证无条件坐擂主 Infinity 属性用于存放表示正无穷大的数值。        //2.遍历挑战者         for(var i = 1;i<=5;i++){             var num = prompt('请输入第' + i + '个挑战者');             //3.依次和擂主PK             if(num > max){                 max = num;             };         };        // console.log(max);

1.2、For/In 循环

JavaScript for/in 语句遍历数组和对象的属性：

var txt = "";var person = {name:"张三", age:"26"}; for (var x in person) {  txt += person[x] + " ";}document.getElementById("demo").innerHTML = txt;

二、while循环

只要条件为 true，循环能够一直执行代码块。

2.1、While 循环

while 循环会一直循环代码块，只要指定的条件为 true。

while (条件 true/false) {    //要执行的代码块    i++}

//* 执行步骤： // * 1.判断条件是否成立   // * 1.1 如果成立，执行循环体代码，然后重复步骤1   // * 1.2 如果不成立，结束循环，执行大括号后面的代码//* 3.注意点 // * （1）小括号中的语句，无论结果是什么都会转换成布尔类型来判断是否成立 // * （2）避免写一个死循环var text = "";var i = 0;while (i < 10) {  text += "<br>数字是 " + i;  i++;}document.getElementById("demo").innerHTML = text;

如果忘了对条件中使用的变量进行递增，那么循环永不会结束。这会导致浏览器崩溃。

2.2、Do/While 循环

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环

do {    //要执行的代码块}while (条件);//* 2.执行过程  //* 1.先执行循环体代码  //* 2.执行条件语句    //* 如果结果为true，执行循环体代码    //* 如果为false，循环结束  //* 3.重复步骤2//* 3.do-while和while实现的循环其实是一样的，只有一个不同点：do-while循环不管怎样先执行一次循环体代码，然后再判断条件  //* while循环：先奏后斩（先判断条件再执行循环体）  //* do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）

//让用户输入账号和密码，如果输入正确就登陆成功，如果输入错误就让他一直输入    //while循环实现     var username = prompt('请输入账号');     var password = prompt('请输入密码');         while(username != 'admin' || password != '123456'){         username = prompt('请输入账号');         password = prompt('请输入密码');     }    //do-while实现    do{        var username = prompt('请输入账号');        var password = prompt('请输入密码');    }while(username != 'admin' || password != '123456')

三、比较 For 与 While

for:

var cars = ["BMW", "Volvo", "porsche", "Ford"];for (var i = 0;i<cars.length;i++) {  text += cars[i] + "<br>";}document.getElementById("demo").innerHTML = text;

while:

var cars = ["BMW", "Volvo", "Saab", "Ford"];var i = 0;var text = "";while (cars[i]) {    text += cars[i] + "<br>";    i++;} 

• 1.原则上，三种循环结构语句之间可以互转，只不过每一种语句的适用场景不一样
• 2.最常用：for循环：适合循环次数固定
• 3.while循环：适合循环次数不固定
• 4.do-while循环：适合循环次数不固定，但是循环体代码至少要执行一次

四、 Break 和 Continue

• break 语句“跳出”循环。
• continue 语句“跳过”循环中的一个迭代。

for (i = 0; i < 10; i++) {    if (i === 3) {         break;     }    text += "数字是 " + i + "<br>";}

for (i = 0; i < 10; i++) {    if (i === 3) {         continue;     }    text += "数字是 " + i + "<br>";} 

五、练习题：

• 九九乘法表 循环嵌套