目录2.4.1、顺序流程控制2.4.2、分支流程控制1if分支语句条件判断语句2if....else...语句需求1需求23if...else if...else语句多分支语句2.4.2.2、三元表达式2.4.2.3、switch分支语句 switch...case...语句2.4.3、循环语句2.4.3.1、for循环2.4.3.2、双重for循环2.4.3.3、while循环2.4.3.4、do···while循环2.4.4、continue、break关键字1、continue关键字2、 break关键字2.4、流程控制js语句流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构分别是顺序结构、分支结构、循环结构这是三种结构代表三种代码执行的顺序。2.4.1、顺序流程控制顺序结构是程序中最简单的、最基本的流程控制它没有特定的语法结构程序会按照代码的先后顺序依次执行程序中大多数的代码都是这样执行的.代码块1.使用{}来为语句进行分组同一{}的语句称为一组语句2.js中的代码块只具有分组的功能没有其他用途3.代码块中的内容在外部是完全可见的代码块概念在es5阶段是没有任何作用的写不写没区别只能说明代码是一起的//代码块概念 { var num 1;//用var声明变量就是es5语法没有块级作用域 let a 666;//用let声明变量就是es6语法有块级作用域 } // console.log(num); //1 // console.log(a); //报错 }2.4.2、分支流程控制由上到下执行代码的过程中根据不同的条件执行不同的路径代码执行代码多选一的过程从而得到不同的结果1if分支语句条件判断语句使用条件判断语句可以在执行某个语句之前进行判断如果条件成立才会执行语句条件不成立则语句不执行语法结构if(条件表达式){执行语句....};执行思路if行时先对条件表达式进行求值判断如果条件表达式为true则执行if后的语句 如果条件表达式为false则不会执行if后的语句注意代码块应用if只能控制紧随其后的那个语句若希望if控制多条语句可将语句统一放在代码块中。一条if语句代码块不是必须在开发中尽量写清楚//需求弹出一个输入框要求用户输入年龄如果年龄大于等于18岁允许进入网吧 let age prompt(请输入年龄); if (age 18){ console.log(欢迎光临); console.log(have a good day); // //... } //如果if后的代码块就只有一句我们可以省略{} if(age 18 ) console.log(欢迎光临); // console.log(11111111111);2if....else...语句语法结构if条件表达式{ 执行语句1.... }else{ 执行语句2.... }执行思路当该语句执行时会先对if后的条件进行判断如果该值为true则执行if后的语句如果该值为false则执行else后的语句两者选其一执行需求1弹出一个输入框要求用户输入年龄如果年龄大于等于18岁允许进入网吧否则回家好好学习let age prompt(请输入年龄); //条件限制用户输入的不能是小于0不能是除数字外的其他字符 //否则弹出请输入合格数据 let flag age 0 || isNaN(age); if(flag){ alert(请输入合法数字); }else{ if(age 18){ console.log(欢迎光临); console.log(玩的愉快); }else{ conaole.log(回家好好学习吧) } }需求2接收用户输入的年份如果是闰年就弹出闰年否则弹出平年//接收用户输入的年份如果是闰年就弹出闰年否则弹出平年 //闰年被4整除且不被100整除 或者 被400整除 let year prompt(请输入年份); if((year%40 year%100 !0 )||year%400!0){ alert(闰年) }else { alert(平年); }3if...else if...else语句多分支语句语法结构if(条件表达式){ 执行语句.... }else if(条件表达式){ 执行语句.... }else{ 上述都不成立执行语句 }需求1弹出一个输入框要求用户输入年龄如果年龄小于18岁弹出未成年如果年龄在18-60之间弹出要努力工作超过60岁弹出可以退休了let age prompt(请输入年龄:); if(age0 age 18){ alert(未成年); }else if(age18 age 60){ alert(好好工作); }else{ alert(退休了); }2.4.2.2、三元表达式语法结构条件表达式语句1:语句2执行思路如果条件表达式为真返回语句1的值如果条件表达式为假返回语句2的值需求用户输入数字,如果数字小于10,则在前面补10如01如果数字大于10,则不需要补,如20let num prompt(请输入数字); let res num 10 ? 0 num : num; console.log(res);2.4.2.3、switch分支语句 switch...case...语句switch语句也是多分支语句它用于基于不同条件来执行不同的代码当要针对变量设置一系列的特定值的选项时就可以用switch语句switch转换开关的意思case 选项的意思 break退出语句switch(条件表达式){ case 表达式: 执行语句.... break; case 表达式: 执行语句.... break; ······ default: 执行语句... }执行流程在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较如果比较结果为true则从当前case处开始执行代码当前case后的所有代码都会执行我们可以在case的后边跟着一个break关键字这样可以确保只会执行当前case后的语句而不会执行其他的case如果比较结果为false则继续向下比较匹配如果所有的比较结果都为false则只执行default后的语句区别switch语句和if语句的功能实际上有重复的使用switch可以实现if的功能一般情况下两者是可以互相替换的switch···case语句通常处理case为比较确定值得情况下而if···else···语句更加灵活常用于范围判断switch语句进行条件判断后直接执行到程序的条件语句效率更高而if···else语句有几种条件有几种条件就得判断多少次当分支比较少的时if···else语句的执行效率比switch语句//跟if的区别switch做的事特定值的比较if是范围的比较的 //switch一定程度程度上效率比if高 switch(num){ case 1: case 2: case 3: case 4: case 5: alert(合法数字); break; default: alert(非法数字); break; }2.4.3、循环语句实际问题中很多具有规律性的重复操作需要重复执行某些语句2.4.3.1、for循环在程序中一组被重复执行的语句被成为循环体能否继续重复执行取决于循环的终止条件由循环体及循环终止条件组成的语句我们称之为循环语句for循环重复执行某些代码通常跟计数有关系执行思路初始化表达式初始化变量只会执行一次条件表达式 判断是否执行循环体如果为true则执行循环如果为false终止循环执行更新表达式更新表达式执行完毕继续重复2语法//语法1: for(初始化表达式;条件表达式;更新表达式){ 循环体.... } //语法2 初始化表达式; for(;条件表达式;){ 更新表达式; ...... } //语法3:不写表达式会陷入死循环 for(;;){ 循环体.... }练习求1-100之间所有数的和以及平均值求1-100之间所有偶数和奇数的和求1-100之间所有能被3整除的数字的和一行打印五个小星星 *****//1、求1-100之间所有数的和以及平均值 let sum 0; //初始化和 for(let i1;i100;i){ sumi; } alert(1-100间和sum\n1-100间平均值(sum/100)); //2、求1-100之间所有偶数和奇数的和 let ji 0; let ou 0; for(let i1;i100;i){ if(i%20){ oui; }else{ jii; } } alert(奇数和ji\n偶数和ou) // 3、求1-100之间所有能被3整除的数字的和 let sum 0; for (let i 0; i 100; i) { if (i % 3 0) { sum i; } } alert(和 sum);2.4.3.2、双重for循环循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构例如再for循环语句中可以再嵌套一个for循环这样的for循环语句我们称之为双重for循环。语法结构for外层的初始表达式外层的条件表达式外层的操作表达式{ for(里层的初始表达式里层的条件表达式里层的操作表达式){ 执行语句 } }执行思路可以把里面的循环看作是外层循环的语句外层循环循环一次里面的循环执行全部课堂练习1、第一个图形2、第二个图形3、第三个图形4、九九乘法表*******************************************************// 1、第一个图形 // ***** // ***** // ***** // ***** // ***** let str ; for (let i 0; i 5; i) { for (let j 0; j 5; j) { str *; } str br/ } document.write(str); //2、第二个图形 // * // ** // *** // **** // ***** let str1 ; for (let i 0; i 5; i) { for (let j 0; j i; j) { str1 *; } str1 br/; } document.write(str1); //3、第三个图形 // ***** // **** // *** // ** // * let str2 for (let i 0; i 5; i) { for (let j 0; j 5 - i; j) { str2 *; } str2 br/ } document.write(str2); //4.九九乘法表 let str5 ; for(let i1;i9;i){ for(let j1;ji;j){ str5jxi (i*j)nbsp; }str5br/ }document.write(str5);2.4.3.3、while循环while语句可以在条件表达式为真的前提下循环执行指定的一段代码直到表达式不为真时结束循环。当不确定循环次数时可以用while循环语法结构:while条件表达式{ 循环体代码 }执行思路先执行条件表达式如果结果为true则执行循环体代码如果为false则退出循环执行后面的代码执行循环体代码循环体代码执行完毕后程序会继续判断执行条件表达式如条件仍为true则会继续执行循环体直到循环条件为false时整个循环过程才会结束注意while循环里面也有计数器初始化变量while循环里应该也有操作表达式完成计数器的更新防止死循环课堂小练习1、计算1-100之间所有整数的和2、弹出一个提示框你爱我吗如果输入我爱你则提示结束否则一直循环//1、计算1-100之间所有整数的和 let sum0; let i1;//初始化计算器 while(i100){ sumi; i; } console.log(sum) // 2、弹出一个提示框你爱我吗如果输入我爱你则提示结束否则一直循环 let a prompt(你爱我吗) while (a ! 我爱你) { a prompt(你爱我吗) }2.4.3.4、do···while循环do···while语句其实是while语句的一个变体该循环会先执行一次代码块然后对条件表示式进行判断如果条件为真就会重复执行循环体否则退出循环语法结构do{ 循环体 }while条件表达式执行思路先执行一次循环体再判断条件如果条件表达式结果为真则继续执行循环体否则退出循环do...while可以保证循环体至少执行一次而while不行do { str prompt(你爱我吗); } while (str ! 我爱你);2.4.4、continue、break关键字1、continue关键字定义可以用来跳过当次循环默认只会对离他最近的循环起作用for (let i 0; i 5; i) { if(i2){ continue; } console.log(i); } //输出结果如下 // 0 // 1 // 3 // 42、 break关键字可以用来退出循环语句会立即终止离他最近的那个循环语句for (let i 0; i 5; i) { if(i2){ break; } console.log(i); } //输出结果如下 // 0 // 1