流程控制
1.概念
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的，很多时候要通过控制代码的执行顺序来实现我们完成的功能
简单的理解：流程控制就是控制代码，按照一定的结构顺序来执行
流程控制的分类：
- 顺序结构
- 分支结构
- 循环结构
2.顺序流程控制
顺序流程控制是程序中最简单、最基本的流程控制。没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数代码都是这样执行的。
3.分支流程控制
3.1 分支结构
由上到下执行代码的过程中，根据不同的条件，执行不同路径的代码（执行代码多选一的过程），从而得到不同的结果。
JS语言中提供了两种分支结构语句：
- if语句
- switch语句
3.3 if语句
3.3.1 基本if/简单if结构
语法：
// 条件成立执行代码，否则什么也不做
if(条件表达式) {
//条件成立执行的代码语句
}
语句可以简单的理解为一个行为，循环语句和分支语句就是典型的语句，一个程序由很多个语句组成，一般情况下，会分隔成一个一个的语句
执行流程
var age = prompt('请输入年龄：');
if(age == 18){
alert('可以玩整夜的游戏');
}
3.3.2 双分支if结构
语法：
// 条件成立 执行 if里面的代码，否则执行else里面的代码
if(条件表达式){
//【如果】条件成立时执行的代码
} else{
//【否则】执行的代码
}
执行流程
var age = prompt('请输入年龄：');
if(age >= 18){ //年龄满了18
alert('你可以通宵打游戏');
} else {
alert('未成年，进制通宵');
}
3.3.3 多分支if结构
语法：
//适合检查多重条件
if(条件表达式1){
//语句1;
} else if(条件表达式2){
//语句2;
} else if(条件表达式3){
//语句3;
}
...
} else {
//上面的条件都不成立，执行此处的代码
}
执行流程
var score = prompt('请输入小明的分数：');
/* if(score == 100){
alert('奖励手机一部');
} else if(score >= 90 && score < 100){
alert('奖励平板电脑一台');
} else if(score >= 80 && score < 90){
alert('奖励鼠标一个');
} else {
alert('奖励试卷一吨');
} */
if(score == 100){
alert('奖励手机一部');
} else if(score >= 90){
alert('奖励平板电脑一台');
} else if(score >= 80){
alert('奖励鼠标一个');
} else {
alert('奖励试卷一吨');
}
3.3.4 练习
// 需求1：输入年龄（prompt），如果年龄在18岁或以上alert弹出“我爱吃榴莲炒臭豆腐”，否则输出“我爱写作业”
var age = prompt('请输入年龄:');
if(age >= 18){
alert('我爱吃榴莲炒臭豆腐');
} else {
alert('我爱写作业');
}
// 需求2：输入年份（如：2024）判断是否是闰年。
// 闰年能被4整除且不能整除100的为闰年，或者能被400整除的也是闰年 (2024是闰年，1901年不是闰年)
var year = prompt('请输入年份：')
if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){
alert(year + '是闰年')
} else {
alert(year + '不是闰年')
}
4.三元表达式
三目运算
语法：
表达式1 ? 表达式2 : 表达式3;
执行流程：
- 如果表达式1的结果为true，则返回表达式2的值，如果表达式1的结果为false，则返回表达式3的值
- 简单理解：就类似于if … else… (双分支)。可以认为就是双分支的简写
//需求：输入年龄，判断是否18或以上，如果是18或以上则允许通宵
var age = prompt('请输入年龄：')
//1.通过 if...else...
/* if(age >= 18){
alert('允许通宵');
} else {
alert('不允许通宵');
} */
//2.通过三元运算符
var result = age >= 18 ? '允许通宵' : '不允许通宵';
alert(result);
//需求：用户输入0~59之间的一个数字，如果数字小于10，则在这个数字前面补0
var time = prompt('请输入0~59之间的一个数字：');
var result = time < 10 ? '0' + time : time;
alert(result);
5.switch流程控制
- switch: 开关
- case：案例/例子
- break：结束
语法：
switch(表达式){
case value1:
//表达式 等于value1时要执行的代码
break;
case value2:
//表达式 等于value2时要执行的代码
break;
case value3:
//表达式 等于value3时要执行的代码
break;
....
default:
//表达式 不等于任何一个value时要执行的代码
}
- 表达式的值会与结构中的case的值进行比较
- 如果存在匹配全等（===），则该case关联的代码会被执行，并在遇到break就停止，整个switch语句代码执行结束
- 如果所有的case的值都和表达式的值不匹配 ，则执行default里面的代码
- **注意：**执行case里面的语句的时候，如果没有break，则继续执行下一个case中的语句
//输入一个数字，如果输入的是1：苹果 输入2：香蕉 输入3：葡萄 输入4：西瓜 输入其它数字提示输入错误
var num = prompt('请输入一个数字：')
switch(num){
case '1':
alert('您兑换的奖品是苹果');
break;
case '2':
alert('您兑换的奖品是香蕉');
break;
case '3':
alert('您兑换的奖品是葡萄');
break;
case '4':
alert('您兑换的奖品是西瓜');
break;
default:
alert('您输入的数字有误！')
break;
}
var num = parseInt(prompt('请输入数字：'));
switch(num){
default:
console.log('others');
break;
case 2:
console.log('2222222')
break;
case 1:
console.log('111111')
break;
case 3:
console.log(3333333)
break;
}
6.switch和if的区别
- 一般情况下，他们两个语句可以相互替换
- switch…case 语句通常处理case为比较确定的值得情况，而if…else语句更加灵活，常用于范围判断（大于、小于等于等范围）
- sitch语句进行判断后直接执行到程序得条件语句效果更高。而if…else语句有几种条件，就得判断多次
- 当分支比较少得时候，if…else语句执行得效率要比switch语句效率要高
- 当分支比较多得时候，switch语句执行得效率比较高，而且结构更加清晰。
//需求：100分奖励手机一部，90~100奖励键盘一个 60~90奖励鼠标一个 60分以下奖励一顿试卷
var score = parseInt(prompt('请输入分数：'));
//1.if
/* if(score == 100){
alert('奖励手机一部');
} else if(score >= 90){
alert('奖励键盘一个');
} else if(score >= 60){
alert('奖励鼠标一个');
} else {
alert('奖励一吨试卷');
} */
//2.switch
switch(parseInt(score / 10)){
case 10:
alert('奖励手机一部');
break;
case 9:
alert('奖励键盘一个');
break;
case 8:
case 7:
case 6:
alert('奖励鼠标一个');
break;
default:
alert('奖励一吨试卷');
}
7.循环流程控制
7.1for循环
语法结构
for(初始化变量;条件表达式;操作表达式){
}
- 初始化变量：通常用于初始化一个计数器，该表示是中可以使用var关键字声明一个新的变量，这个变量用来帮助我们记录循环次数
- 条件表达式：用于确定每一次循环是否能被执行，如果结果为true就继续循环，否则就退出循环
- 操作表达式：用于确定每一次循环是否能被执行，如果结果是true就继续执行，否则就退出循环
执行过程
- 第一步：变量的初始化时最先开始执行的，而且在整个循环中只执行依次
- 第二步：判断条件是否成立，如果为true则执行循环中的内容，为false则直接跳出循环
- 第三步：如果条件表达式为true，则执行循环中的内容，在执行完成循环中的内容后，进入到操作表达式，对计数器进行更新
- 第四步：计算器更新完成后，重新回到条件表达式，按照上面的第二步和第三步重复执行
断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行的时候就会停住，然后你可以一步一步往下调试，调试过程中可以看到各个变量的当前值，出错的话，调试到出错的代码就会显示错误，停下。断点调试可以帮助我们观察程序运行的过程。
断点调试的流程：
- 在浏览器中按F12 > source > 找到需要调试的文件 > 在程序的某一行设置断点
- watch：监视，可以通过watch设置需要查看的变量，监视它的变化（非常的常用）
- 按下F10程序单步执行，让程序一步一步的执行，这个时候，我们观察watch中的变量值的变化
案例
需求1：输入数字，根据输入的数字输出多少次“我爱中国”
// 需求1：输入数字，根据输入的数字输出多少次“我爱中国”
var num = prompt('请输入次数：');
for(var i = 1; i <= num; i++){
console.log('第' + i + '次,我爱中国');
}
需求2：计算从1到100的和
var sum = 0; //1到100的和
for(var i = 1; i <= 100; i++){
sum = sum + i; //1.sum = 0 + 1; 2.sum = 1 + 2 3.sum = 1 + 2 + 3,....
}
console.log(sum)
需求3：求1到100中所有偶数的和
//需求3：求1到100中所有偶数的和
var sum = 0; //和
for(var i = 1; i <= 100; i++){
if(i % 2 == 0){
sum += i;
}
}
console.log('1到100的偶数和为：' + sum);
需求4：打印输出所有的三位数中的水仙花数（水仙花数：各个位上的数的三次方之和等于它本身）
var a = 123;
console.log(‘个位数:’,a % 10)
console.log(‘十位数:’,parseInt(a / 10) % 10)
console.log(‘百位数’,parseInt(a / 100))
if(a % 10 * a%10 * a %10 + parseInt(a / 10) % 10 * parseInt(a / 10) % 10 * parseInt(a / 10) % 10 +
parseInt(a / 100) * parseInt(a / 100) * parseInt(a / 100) === a){
console.log(a)
}
//需求4：打印输出所有的三位数中的水仙花数（水仙花数：各个位上的数的三次方之和等于它本身）
for(var i = 100; i<= 999; i++){
//获取到个位、百位和十位数字
var gewei = i % 10;
var baiwei = parseInt(i / 100);
var shiwei = parseInt(i / 10) % 10;
//判断是否为水仙花数
if(gewei * gewei * gewei + shiwei * shiwei * shiwei + baiwei * baiwei * baiwei == i){
console.log(i);
}
}
需求：求1~100之间所有能被3整除的数字之和
需求：弹出输入框输入总的班级人数，依次输入学生的成绩，并计算学生的总成绩、平均成绩。（最高分和最低分）
// 需求：弹出输入框输入总的班级人数，依次输入学生的成绩，并计算学生的总成绩、平均成绩。（最高分和最低分
var num = parseInt(prompt('请输入班级人数：'));
var sum = 0; //总分
var avg = 0;//平均分
//有多少人，就循环录入多少次分数
for(var i = 1; i <= num; i++){
var score = parseInt(prompt('请输入第' + i + '位学生的分数：'))
sum += score;//计算总分
}
//等录入完成，总分算出来后，计算平均分
avg = sum / num;
console.log('总分是：' + sum + '平均分是：' + avg)
7.2 双重for循环
概述
循环嵌套。是指在一个循环语句中再定义一个循环语句的语法结构。例如for循环语句中，可以再嵌套另一个for循环，这样的for循环就是我们所说的双重for循环
语法
for(外循环的初始化;外循环的条件;外循环的操作表达式){
for(内循环的初始化;内循环条件;内循环操作表达式){
//需要执行的代码
}
}
- 内层循环可以看作是外城循环的循环体语句。（外层循环执行一次，内层循环执行一整轮）
- 内层循环执行的顺序也要遵循for循环的执行顺序
打印三角形
☆
☆☆
☆☆☆
☆☆☆☆
☆☆☆☆☆
var str = '';
//外层循环：负责行
for(var i = 1; i <= 5; i++){
//内层循环：负责打印五角星
for(var j = 1; j <= i; 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 + '=' + i*j + "\t";
}
str += '\n'; //换行
}
console.log(str)
for循环小结
- for循环可以重复执行某些相同的代码
- for循环可以重复执行某些不同的代码，因为我们有计数器
- 随着需求的增加，双重for循环可以做更多，更好看的效果，外城循环一次，内层for循环全部执行
- for循环时循环条件和数字相关的循环
7.3while循环
语法结构
while(循环条件){
//循环代码
}
执行过程
- 先执行初始化条件，第一步：执行条件表达式，如果结果为true，则执行循环体中的代码，如果为false则直接退出循环，执行循环后面的代码
- 第二步：执行更新循环变量，再次回到循环条件判断，再按照第一步中的执行
//打印1到10
var i = 1;
while(i <= 10){
console.log(i);
i++;
}
**注意：**使用while循环的时候一定要注意它必须要有退出条件，否则会成为死循环。
while循环案例
需求2：计算从1到100的和
//需求2：计算从1到100的和
var sum = 0; //和
var i = 1; //初始化循环变量
while(i <= 100){ //循环条件
sum += i;
i++;//更新循环变量
}
console.log('一到100的和为：' + sum)
需求3：求1到100中所有偶数的和
//需求3：求1到100中所有偶数的和
var sum = 0; //1到100的偶数和
var i = 1;
while(i <= 100){
if(i % 2 == 0){
sum += i;
}
i++;
}
console.log('偶数和为：' + sum)
7.4do…while循环
语法结构
do {
//循环体代码
} while(条件表达式);
执行流程
- 先执行一次循环体中的代码
- 再执行条件表达式，如果为true，则继续执行循环体中的代码，如果为false，则退出循环执行循环后的代码
**注意：**先执行，后判断。do…while循环至少会执行一次
do…while循环案例
需求2：计算从1到100的和
//需求2：计算从1到100的和
var sum = 0; //1到100的和
var i = 1;
do{
sum += i;//求和
i++;
}while(i <= 100);
console.log('1到100的和为：' + sum)
需求3：求1到100中所有偶数的和
//需求3：求1到100中所有偶数的和
var sum = 0; //1到100所有偶数的和
var i = 1;
do{
if(i % 2 == 0){
sum += i;
}
i++;
}while(i <= 100);
console.log(sum)
8.三种循环的区别
- 对于循环次数确定的循环，推荐使用for循环
- 对于循环次数不确定的循环，推荐使用while循环
- 对于必须要执行一次的代码，我们推荐使用do…while循环
- 实际开发中90%以上用到的时for循环
9.break和continue
9.1 continue
continue关键字用于立即跳出本次循环，继续进入下一次循环（本次循环中continue之后的代码不会被执行）
如：吃5个包子，第三个包子有问题扔掉，继续吃第四个和第五个包子。
9.2 break
break关键字用于立即结束循环
9.3 练习
需求1：求1~100之间，除了能被7整除之外的数的和
//需求1：求1~100之间，除了能被7整除之外的数的和
/*
var sum = 0;
for(var i = 1; i <= 100; i++){
if(i % 7 != 0){
sum += i;
}
}
console.log(sum); //4315
*/
//要求用continue
var sum = 0;
for(var i = 1; i <= 100; i++){
if(i % 7 == 0){ //如果能被7整除，则不加
continue;
}
sum += i;
}
console.log(sum); //4315
需求2：输入用户名和密码，如果用户名和密码分别为（admin，123）则提示登录成功，否则提示还剩余几次输入机会，如果3次都输入错误，则提示你没有机会了
for(var i = 1; i <= 3; i++){
var name = prompt('请输入用户名：');
var pwd = prompt('请输入密码：');
if(name == 'admin' && pwd == '123'){
console.log('登录成功');
break;//结束整个循环
} else {
console.log('登录失败,还剩下' + (3 - i) + '次机会');
}
}