❤️JavaScript系列6部曲：流程控制（万字长文）❤️
❤️JavaScript系列6部曲：流程控制（万字长文）❤️
🎈 作者：不吃西红柿
🎈 简介：CSDN博客专家🏆、蓝桥签约作者、Python领域优质创作者、「信息技术智库」公号作者✌。技术交流、面试刷题尽管关注咨询我。
01 流程控制
流程控制即代码的执行过程，有三种方式：
1.顺序结构:从上到下,从左到右执行的顺序,就叫做顺序结构
2.分支结构:if语句,if-else语句,if-else if-else if…语句,switch-case语句,三元表达式语句
3.循环结构:while循环,do-while循环,for循环,后期还有一个for-in循环
02 分支语句之if语句
语法：
语法: if(表达式){ 代码块 }执行过程:先判断表达式的结果是true还是false,如果是true则执行代码块,如果是false,大括号中的代码是不执行的
例子:
1.如果18大于16,请输出8,如果一个数字大于另一个数字则输出大的数字
2.问:阿珊的年龄是否大于18岁,如果是成年的,则提示,可以打代码了
if(18>16){ console.log(18); }//例子1: var num1=10; var num2=100; if(num1>num2){ console.log(num1); } console.log("我执行了"); //例子2var age = 19; if (age >= 18) { console.log("可以打代码了"); } else { console.log("打什么代码，浪起来") }03 分支语句之if-else语句
理解：if-else 语句：两个分支,只能执行一个分支
语法如下：
if(表达式){ // 代码1 }else{ // 代码2 }执行过程：如果表达式的结果是true则执行代码1,如果表达式的结果是false,则执行代码2
举一些例子:
//定义变量,并初始化var age = 100; //判断if (age >= 18) { console.log("可以看电影了,嘎嘎...");} else { console.log("看什么看,回家写作业去"); } //提示用户请输入年龄----var age=prompt("请您输入您的年龄");//弹框---并且有输入,输入的内容在age变量中 console.log(age);//最终的结果是字符串的类型 //案例1:var age = parseInt(prompt("请您输入年龄")); //判断if (age >= 18) { console.log("可以看电影了,嘎嘎..."); } else { console.log("看什么看,回家写作业去"); }//练习1:找到两个数字中的最大值var num1=10; var num2=20; if(num1>num2){ console.log(num1); }else{ console.log(num2); }//练习2:判断这个数字是奇数还是偶数var number=parseInt(prompt("请输入一个数字")); if(number%2==0){ console.log("偶数"); }else{ console.log("奇数"); }04 分支语句之三元表达式
语法:
var 变量=表达式1?表达式2:表达式3;执行过程:表达式1的结果是true还是false,如果是true则执行表达式2,然后把结果给变量
如果表达式1的结果是false,则执行表达式3,把结果给变量
//两个数字中的最大值var x = 10;var y = 20;var result1 = x > y ? x : y;console.log(result1);//显示成年还是未成年var age = 10;var result2 = age >= 18 ? "成年了" : "未成年";console.log(result2);总结:大多数情况,使用if-else的语句都可以用三元表达式的方式来表示
05 分支语句之if-else if语句
if语句只有一个分支
if-else语句有两个分支,最终执行一个分支
if-else if-else if-else if-else if…else—多分支,最终也是执行一个
if-else if语句…
语法:
if(表达式1){ 代码1}elseif(表达式2){ 代码2}elseif(表达式3){ 代码3}else{ 代码4 }else if—这种结构可以写多个,具体多少个看需求,
else–结构是可以不用写的,具体也是看需求
执行过程:
先判断表达式1的结果,
如果为true则执行代码1
如果为false,则判断表达式2
如果表达式2为true则执行代码2
如果为false,则判断表达式3
如果表达式3为true则执行代码3
否则执行代码4
例子: 成绩的结果是在90到100(包含)之间则 显示A级 如果成绩是在80到90(包含)之间,则显示B级 如果成绩是在70到80(包含)之间,则显示C级 如果成绩是在60(包含)到70(包含)之间,则显示D级 如果成绩在0到60(不包含)之间,则显示E级
var score=parseInt(prompt("请你输入成绩"));//有bug if(!isNaN(score)&&!(score>100&&score<0)){//如果为true，说明不是数字 console.log("输入不规范，请重新输入") if(score>90&&score<100){ console.log("a级") }else if(score>80&&score<90){ console.log("b级") }else if(score>70&&score<80){ console.log("c级") }else if(score>=60&&score<70){ console.log("d级"); }else{ console.log("e级") } } // 或者可以这么写var score = Number(prompt("请您输入成绩"));//有bug if (!isNaN(score)) {//如果为true就说明 不是数字 if (score > 90 && score <= 100) { console.log("A级"); } else if (score > 80) { console.log("B级"); } else if (score > 70) { console.log("C级"); } else if (score >= 60) { console.log("D级"); } else { console.log("E级"); }} else { console.log("您输入有误"); }练习:判断一个年份是不是闰年
定义变量存储一个年份
var year=Number(prompt("请您输入年份"))if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { console.log("闰年");}else{ console.log("平年");}06 分支语句之switch-case语句
switch-case语句—分支语句—多分支语句
语法:
switch(表达式){ case 值1:代码1;break; case 值2:代码2;break; case 值3:代码3;break; case 值4:代码4;break; ...多个case default:代码5;注意问题:
default后面的break是可以省略的
default也可以省略
switch-case 语句中和case后面的值比较的时候使用的是严格的模式
break是可以省略
执行过程:
获取表达式的值,和值1比较,如果一样,则执行代码1,遇到break则跳出整个的语句,
后面代码不执行
如果表达式的值和值1不一样,则和值2比较,如果相同则执行代码2,
遇到break则跳出
否则和值3比较,相同则执行代码3,遇到break,跳出,
否则和值4比较,相同则执行代码4,遇到break则跳出,否则直接执行代码5
例子:获取一个人的成绩的级别,如果是A级则显示90到100直接的分数
如果是B级则显示80到90分
如果是C级则显示70到80之间分数
如果是D级则显示60到70分之间
否则显示0到59之间
var jiBie=prompt("请输入级别");switch(jiBie){ case"a":console.log("90-100");break; case"b":console.log("80-90");break; case"c":console.log("70-80");break; case"d":console.log("60-70");break; default:console.log("0-59");//break;(可以省略)}varjiBie = "E";switch(jiBie) { case "A": console.log("90到100之间"); break; case "B": console.log("80到90之间"); break; case "C": console.log("70到80之间"); break; case "D": console.log("60到70之间"); break; default : console.log("0到59之间"); }根据月份显示对应的天数
var mouth=parseInt(prompt("请输入月份")); switch(mouth){ case 1: case 3: case 5: case 7: case 8: case 10: case 12:console.log("31");break; case 2:console.log("28");break; case 4: case 6: case 9: case 11:console.log("30");break; }// 1,3,5,7,8,10,12 —31天// 2----28天// 4,6,9,11----30 var month=parseInt(prompt("请输入月份")); switch (month){ case 1:console.log("31天");break; case 2:console.log("28天");break; case 3:console.log("31天");break; case 4:console.log("30天");break; case 5:console.log("31天");break; case 6:console.log("30天");break; case 7:console.log("31天");break; case 8:console.log("31天");break; case 9:console.log("30天");break; case 10:console.log("31天");break; case 11:console.log("30天");break; case 12:console.log("31天");break; } // 练习:根据数字显示对应的星期var num = parseInt(prompt("请输入一个星期的数字"));switch (num) { case 1: console.log("day1"); break; case 2: console.log("day2"); break; case 3: console.log("day3"); break; case 4: console.log("day4"); break; case 5: console.log("day5"); break; case 6: console.log("day6"); break; case 7: console.log("day7"); break; default: console.log("输入有误");}07 总结分支语句
分支语句:
if语句:一个分支
if-else语句:两个分支,最终只执行一个分支
if-else if-else if…语句: 多个分支,也是只会执行一个
switch-case语句:多分支语句,最终也会一个(必须要有break)
三元表达式:和if-else语句是一样的
什么时候使用if-else if…: 一般是对范围的判断
什么时候使用switch-case语句:一般是对具体的值的判断
如果有多个分支,是针对范围的判断一般选择if-else if的语句
如果有多个分支,是针对具体的值判断,一般选择用switch-case语句
08 循环语句之while循环
循环:一件事不停的或者是重复的做
循环要有结束的条件,循环还应该有计数器(记录循环的次数的
while循环
while循环语法:
计数器var 变量=0;while(循环的条件){ 循环体; 计数器++;}执行过程:
先判断条件是否成立,(条件的结果是true还是false),如果是false,
那么循环的代码(while的大括号中的代码都不执行),如果是true,
那么先执行循环体,然后执行计数器,然后,直接去—>循环的条件,
再次判断是否成立,成立则继续执行循环体,否则跳出循环,执行完循环体之后,
计数器加1,然后再去循环的条件,判断,成立则循环,否则跳出循环
练习:
// 计算1-100之间所有数字的和var sum=0;var i=0;while(i<=100){//sum=sum+i;sum+=i;i++}console.log("和为："+sum)var sum=0;while(i<10){ console.log("和为："+sum) sum+=i;}var sum=0;//存储最终的和var i=1;//计数器while(i<=100){ //sum=sum+i;//不停的计算数字的和 sum+=i; i++;}console.log("和为:"+sum); var sum=0;//存储最终的和 var i=0;//计数器 while(i<=5){ //sum=sum+i;//不停的计算数字的和 sum+=i; i++; } console.log("和为:"+sum); // 求6的阶乘: var ji = 1;//存储最终的阶乘的结果 var i = 1;//开始的数字 while (i <= 6) { ji *= i; i++; } console.log(ji) var ji = 1;//存储最终的阶乘的结果 var i = 1;//开始的数字 while (i <= 6) { ji *= i; i++; } console.log(ji);求1-100之间所有的偶数的和var i=1;//计数器var sum=0;//存储所有数字的和//判断这个数字是不是奇数,如果是奇数则相加,把结果存放在sum变量中while(i<=100){ if(i%2!=0){ sum+=i; } i++;//为了不变成死循环}console.log(sum)求1-100之间所有的奇数的和var i = 1;//计数器var sum = 0;//存储和的while (i <= 100) { if (i % 2 != 0) { sum += i; } i++;}console.log(sum);// 请输出1-100之间所有能够被7整除的数字 var i = 0; while (i <= 100) { if (i % 7 == 0) { console.log(i); } i++; } var i=1; while(i<=100){ //判断这个数字是否能够被7整除 if(i%7==0){ console.log(i); } i++; }//求帐号和密码是否一致,登录的效果实现//提示用户输入帐号//提示用户输入密码//如果帐号或者密码不对,则一直提示用户输入帐号和密码//帐号–admin//密码–123—字符串类型var userName=prompt("请输入帐号"); var userPwd=prompt("请输入密码"); while(userName!="admin"||userPwd!="123"){ userName=prompt("请输入帐号"); userPwd=prompt("请输入密码"); } console.log("登录成功")09 循环语句之do-while循环
语法:
do{ 循环体}while(条件);执行过程:
先执行一次循环体,然后判断条件是否成立,不成立,
则跳出循环,成立则执行循环体,然后再判断条件是否成立,成立则继续循环,否则跳出…
输出:阿珊要睡觉了…10次
var i=0; do{ console.log("阿珊要睡觉了") i++; }while(i<10); //注意：分号一定要下 // 练习:求100以内所有3的倍数的和 //方法1： var i = 1; var sum = 0; while (i <= 100) { if (i % 3 == 0) { sum += i; } i++; } console.log(sum) //方法2 var i = 1; var sum = 0; do { if (i % 3 == 0) { sum += i; } i++; } while (i <= 100); console.log(sum)10 总结while循环和do-while循环
while循环特点:先判断,后循环,有可能一次循环体都不执行
do-while循环特点:先循环,后判断,至少执行一次循环体
11 循环语句之for循环
for(表达式1;表达式2;表达式3){ 循环体; }执行过程:
先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环
如果表达式2成立,执行循环体的代码,结束后,跳到表达式3执行,然后跳到表达式2,判断表达式2是否成立,不成立,则跳出循环
如果表达式2成立,则执行循环体,然后再跳到表达式3,再跳到表达式2,判断是否成立,一直如此
for(var //例子:打印10次,哈哈,我又变帅了for (var i = 0; i < 10; i++) { console.log("日照香炉生紫烟,一对情侣在林间.远看身影如神仙,近看竟然是于千");}//求1-100之间所有数字的和var sum = 0;for (var i = 1; i <= 100; i++) { sum += i;}console.log("和为:" + sum);// for (var i = 0; i < 10; i++) {// console.log("小杨好帅");// }for(var i=0;i<10;i++){ console.log("love")//求1-100之间所有偶数的和var sum=0;for(var i=0;i<=100;i++){ if(i%2==0){ sum+=i; }}console.log(sum)// 求1-100之间所有奇数的和 var sum=0; for(var i=0;i<=10;i++){ if(i%2!=0){ sum+=i; } } console.log(sum)// 求1-100之间所有能被3整除的数字的和var sum=0;for(var i=1;i<100;i++){ if(i%3==0){ sum+=i; }}console.log(sum)// 求1-100之间所有能被7整除的数字的和var sum=0;for(var i=1;i<=100;i++){ if(i%7==0){ sum+=i; }}console.log(sum)//画星星for(var i=0;i<=5;i++){ for(var j=0;j<=i;j++){ document.write("☪") } document.write("<br/>")} //控制行数的---正方形的 for (var i = 0; i <= 5; i++) { //控制每一行有几个星星 for (var j = 0; j <= 5; j++) { document.write("★"); } document.write("<br/>"); } // // for(var j=0;j<=2;j++){ // document.write("★"); // }三角形的—五角星----随着行数的增加,每一行都会比上一行多一个五角星for (var i = 0; i <= 5; i++) { //控制每一行有几个星星 for (var j = 0; j <= i; j++) { document.write("★"); } document.write("<br/>");}// 乘法口诀表 for(var i=1;i<=9;i++){ //控制每一行有多少个表达式 for(var j=1;j<=9;j++){ document.write(j+"*"+i+"="+i*j); } document.write("<br/>"); } for(var i=1;i<=9;i++){ //控制个数 for(var j=1;j<=i;j++){ document.write(j+"*"+i+"="+i*j) } document.write("<br/>")
}腾讯云开发者
