JS 流程控制
简介
在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们腰通过控制代码
的执行顺序来实现我们腰完成的功能
简单理解:流程控制就是来控制我们的代码按什么结构顺序来执行
流程控制主要有三种结构,分别是 顺序结构、分支结构 和 循环结构,这三种结构代表三种代行的顺序
分支结构
if 语句流程控制
if 的语法结构
if(条件表达式){
//执行语句
}
执行思路 如果 if 里面的 条件表达式结果为真 true 则执行大括号里面的执行语句
如果 if 条件表达式为假 则不执行大括号里面的语句 则执行 if 语句后面的代码
if else 语法结构
if(条件表达式){
//执行语句1
}else {
//执行语句2
}
if else if else 多分支语句
多分支语句，就是利用多个条件来选择不同的语句执行 多选 1 的过程
if (条件表达式1){
//执行语句1
} else if (条件表达式2){
//执行语句2
} else if (条件表达式3){
//执行语句3
...
} else {
//上述条件都不成立执行的代码
}
小小案例1（if）
弹出一个输入框，要求用户输入年龄，如果年龄大于等于 18 ，允许进网吧
var age = +prompt('请输入您的年龄');
if(age >= 18){
alert('年龄符合，可以进入网吧！！');
}else{
alert('您的年龄不符合！')
}
小小案例2 (if else)
接收用户输入的年份 如果是闰年就弹出闰年，否则弹出平年
var year = +prompt('请输入一个年份');
if( (year % 4 == 0 && year % 100 != 0) || year % 400 == 0){
alert(year + '是闰年');
} else {
alert(year + '是平年');
}
小小案例3 (if else)
接收用户输入的姓名，来判断是否中将，如果输入的是刘德华，则提示中了5块钱，否则提示没中奖
var yName = prompt('请输入您的年龄');
if( yName == '刘德华'){
alert('恭喜您中奖5元！！');
} else {
alert('好遗憾，您没有中奖');
}
小小案例4 (if else if else)
接收用户输入的分数，根据分数输出对应的等级字母 A、B、C、D、E、其中：90分（含）以上，输出 A，80分（含）—90分（不含），输出B 70分（含）—80（不含）输出C，60分（含）—70（不含），输出D，60分（不含）一下，输出E.
var score = +prompt('请输入分数');
if (score >= 90){
alert('A');
} else if (score >= 80){
alert('B');
} else if (score >= 70){
alert('C');
} else if(score >= 60){
alert('D');
} else {
alert('E');
}
三元表达式
由三元运算符组成的式子我们称为三元表达式 ? :
**语法结构：**条件表达式 ? 表达式1 : 表达式2
var num = 10;
num > 5 ?'是的' : '不是的';
小小案例5 ( ? : )
用户输入数字，如果数字小于10，则在前面补0，如01，09，如果数字大于10，就输出数字本身
var num = +prompt('请输入0-59之间的数字');
var result = num < 10 ? '0' + num :num;
alert(result);
switch
switch 也是多分支语句，也可以实现多选 1。当腰争对变量设定一系列特定值的选项时，就可以使用stitch
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句3;
break;
case value3:
执行语句3;
break;
case value4:
执行语句4;
break;
...
default:
最后执行的语句;
}
小小案例 ( 查询水果)
用户在输入框输入一个水果，如果有就弹出该水果的价格，如果没有该水果就输出“没有此水果”。
var fruit = prompt('请输入您需要的水果');
switch(fruit){
case '苹果':
alert('3.5元一斤');
break;
case '榴莲':
alert('35元一斤');
break;
case '香蕉':
alert('4元/斤');
break;
default:
alert('没有该水果');
break;
}
switch语句和 if else if语句的区别
-
一般情况下,它们两个语句可以相互替换
-
switch.case语句通常处理case为比较确定值的情况,而i.else…语句更加灵活,常用于范围判断(大于、
等于某个范围 -
switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而f.else语句有几种条件,就得判断多
少次 -
当分支比较少时,f.else语句的执行效率比 switch语句高。
-
当分支比较多时, switch语句的执行效率比较高,而且结构更清晰。
分支结构练习：
- 判断时间阶段。比如用户输入12点弹出中午好用户输入18点弹出傍晩好用户输入23点弹出深夜好
//有bug 如果数字数字大于23还是深夜好，而深夜是23~3
var time = +prompt('请输入时间');
if(time >= 23){
alert('深夜好');
} else if(time >= 19){
alert('晚上好');
} else if(time >= 17){
alert('傍晚好');
} else if(time >= 13){
alert('下午好');
} else if(time >= 11){
alert('中午好');
} else if(time >= 8){
alert('上午好');
} else if(time >= 6){
alert('早晨好');
}else if(time >= 3){
alert('凌晨好');
}
- 比较两个数的最大值(用户依次输入2个值,最后弹单出最大的那个值)
var num1 = +prompt('请输入数字1');
var num2 = +prompt('请输入数字2');
var max = num1 > num2 ? num1 : num2;
alert('最大数：'+max);
- 用户输入一个数,来判断是奇数还是偶数
var num = +prompt('请输入数字为您判断奇偶数');
num % 2 == 0 ? alert('您输入的数是偶数') : alert('您输入的数字是奇数');
- 根据用户输入的数值(数字1到数字7),返回星期几
var num = +prompt('请输入数字1~7');
switch(num){
case 1:
alert('星期一');
break;
case 2:
alert('星期二');
break;
case 3:
alert('星期三');
break;
case 4:
alert('星期四');
break;
case 5:
alert('星期五');
break;
case 6:
alert('星期六');
break;
case 7:
alert('星期日');
break;
default:
alert('输入有误！');
break;
}
- 接收班长口袋里的钱数?若大于等于2000,请大家吃西餐。若小于2000,大于等于1500,请大家吃快餐。
若小于1500,大于等于1000,请大家喝饮料。若小于1000,大于等于500,请大家吃棒棒糖。否则提醒班长
下次把钱带够
var money = +prompt('请输入班长的钱数');
if(money >= 2000){
alert('班上请大家吃西餐');
} else if(money >= 1500){
alert('班上请大家吃快餐');
} else if(money >= 1000){
alert('班长请大家喝饮料');
} else if(money >= 500){
alert('班长请大家吃棒棒糖');
} else {
alert('班长,大家提醒你下次把钱带够!');
}
- 分数转换，给个分数,判定等级。大于等于90A,大于等于80小于90B,大于等于70小于80C,大于
等于60小于70D,小于60E
//有bug 只要数字大于90，就是A。那200呢？1000呢？不符合常理
var score = +prompt('请输入分数');
if (score >= 90){
alert('A');
} else if (score >= 80){
alert('B');
} else if (score >= 70){
alert('C');
} else if(score >= 60){
alert('D');
} else {
alert('E');
}
循环结构
循环目的
在实际问题中，有许多 具有规律性的重复操作 ，因此在程序中需要完成这类操作就需要 ： 重复执行某些语句
for循环
语法结构
for(初始化变量;条件表达式;操作表达式){
//循环体
}
- 初始化变量：就是用var 声明的一个普通变量 ，通常用于作为计数器使用
- 条件表达式：就是用来决定每一次循环是否继续执行，就是终止的条件
- 操作表达式：是每次循环最后执行的代码，经常用于我们计数器变量进行更新（递增 或 递减）
执行过程
for(var i = 1;i <= 100;i++){
console,log('HOW are you?');
}
循环嵌套
循环嵌套 是值在一个循环语句中在定义一个循环语句的语法结构，例如for循环语句中，可以在嵌套一个for循环，这样的 for 循环语句我们称之为 双重for循环
语法结构：
for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
for(内层的初始化变量;内层的条件表达式;内层的操作表达式){
}
for循环练习
-
求 1~ 100之间所有数的平均值
var sum = 0; for(var i = 1;i <= 100;i++){ sum += i; } var mean = sum / 100; console.log('1~100之间的平均数是：'+mean); -
求 1~100之间所有偶数和奇数的和
var even = 0; var odd = 0; for(var i = 1;i <= 100;i++){ if(i % 2 == 0){ even += i }else { odd += i; } } console.log('1~100之间的偶数是：'+even); console.log('1~100之间的奇数是：'+odd); -
求 1~100 之间所有能被3整除的数字和
var sum = 0; for(var i = 1;i <= 100;i++){ if(i % 3 == 0){ sum += i; } } console.log('1~100之间能被3整除的数字和是：'+sum); -
用户输入班级人数，之后依次输入每个学生的成绩，最后打印出班级总人数以及平均成绩
var people = +prompt('请输入学生人数：'); //people 总的学生人数 var score = 0; //分数求和变量 var average = 0; //求平均值的变量 for(var i = 1;i <= people;i++){ score += +prompt('请输入第'+i+'个学生的分数'); } average = score / people; console.log('这个班总人数是：'+people); console.log('平均成绩是：'+average); -
一行打印五个星星
var str = ''; for (var i = 1; i <= 5; i++) { str += '⭐' } console.log(str); -
打印倒三角形
var rows = prompt('请输入要打印星星的行数：'); var cols = prompt('请输入要打印星星的列数：'); var str = ''; for (var i = 1; i <= rows; i++) { for(var j = i;j <= cols;j++){ str +='⭐'; } str += '\n'; } console.log(str); -
打印九九乘法表
var str = ''; for (var i = 1; i <= 9; i++) { for(var j = 1;j <= i;j++){ // str += j + i = ; str += (j +'×'+ i +'='+ j * i)+'\t'; } str += '\n'; } console.log(str);
while 循环
whie语句可以在条件表达式为真的的提下,循环执行指定的段代码,直到达式不为真时结束循环
whie语句的语法结构如下
while(条件表达式){
//循环体代码
}
执行思路:
① 先执行条件表达式,如果结果为true,则执行循环体代码;如果为 false,则退出循环,执行后面代码
② 执行循环体代码
③ 循环体代码执行完毕后,程序会继判断执行条件表达式,如条件仍为te,则会继续行循环体,直劉循
环条件为 false时,整个循环过程才会结束
while循环案例：
-
打印人的一生，从1岁到100岁
var people = 1; while(people <= 100){ console.log(people); people++; } -
计算 1~100之间所有整数的和
var num = 1; var sum = 0; while(num <= 100){ sum += num; num++; } console.log(sum); -
弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则就一直循环
var message = prompt('你爱我吗？'); while(message != '我爱你'){ message = prompt('你爱我吗？'); } alert('嘻嘻，我不爱你！！！');
do while 循环
do. while语句其实是whle语句的一个变体。该循环会执行次代码块,然后对条件表达式进行判断,如
果条件为真,就会重复执行循环体,否则退出循环。
do-whle语句的语法结构如下：
do {
//循环体代码-条件表达式为true时重复执行循环体代码
}while(条件表达式);
执行思路:
①先执行次循环体代码
②再执行条件表达式,如果结果为true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面
注意:先再执行循环体,再判断,我们会发现do…while循环语句至少会执行一次循环体代码
-
1~100之间的和
var j = 1; var sum = 0; do { sum += j; j++; }while(j <= 100); console.log(sum); -
弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则就一直循环
do { var message = prompt('你爱我吗？'); }while(message != '我爱你'); alert('我也爱你...'); -
判断用户名密码，若用户名为 “admin”，密码为 123456，则提示用户登录成功，否则一直让用户输入用户名和密码
do { var user = prompt('请输入用户名'); var pwd = +prompt('请输入密码'); } while(user !='admin' && pwd != '123456'); alert('输入正确,进入系统中...');
continue&bleak
continue关键字: 用于立即 跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)。
-
求 1~100 之间，除了能被7整除之外的整数和
var sum = 0; for(var i = 1;i <= 100;i++){ if(i %7 === 0){ continue; } sum += i; } console.log(sum);
break关键字: 用于立即 跳出整个循环（循环结束）。
// break 推出整个循环
for(var i = 1;i <= 100;i++){
if(i === 3){
break;
}
console.log('我正在吃第'+i+'个包子');
}
来源：CSDN
作者：平头哥→_→
链接：https://blog.csdn.net/weixin_42207353/article/details/104739043