目录
一、什么是流程控制
在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能
- 简单来说流程控制就是来控制我们的代码按照什么结构顺序来执行
- 流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序
二、顺序结构
程序会按照代码的先后顺序,依次执行
三、分支结构--if语句
由从上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。
1.if语句
1.1语法结构
if (条件表达式) {
//执行语句
}
1.2执行思路
如果if里面的条件表达式结果为真true则执行中括号里面的执行语句
如果if里面的条件表达式结果为假flase则不执行中括号里面的语句则执行if语句后面的代码
1.3案例:进入网吧
//1.弹出prompt输入框,用户输入年龄,程序把这个值保存到变量中
var age = prompt('请输入你的你年龄');
//2.使用if语句来判断年龄,年龄大于18可以进入
if (age > 18) {
alert('你可以进入网吧')
}
2.if…else双分支语句
2.1语法结构
//条件成立 执行if里面代码,否则执行else里面的代码
if (条件表达式) {
//[如果]条件成立执行的代码
} else {
//[否则]执行的代码
2.2执行思路
如果表达式结果为真执行语句1,否则执行语句2
if里面的语句1和else里面的语句2最终只能有一个语句执行 2选1
else后面直接跟中括号
2.3案例:进阶进入网吧
//1.弹出prompt输入框,用户输入年龄,程序把这个值保存到变量中
var age = prompt('请输入你的你年龄');
//2.使用if语句来判断年龄,年龄大于18可以进入
if (age > 18) {
alert('你可以进入网吧')
} else {
alert('你未成年还是去学习吧 ')
}
2.4案例:判断闰年
接收用户输入的年份,如果是闰年就弹出闰年,否则就弹出平年
//1.弹出prompt输入框,让用户输入年份,并且保存在变量中
var year = prompt('请输入年份');
//2.使用if语句来判断是否是闰年
//能被4整除且不能被100整除的为闰年或者能够被400整除的就是闰年
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('你输入的年份是闰年')
} else {
alert('您输入的年份是平年')
}
3.if else if语句(多分支语句)
3.1语法结构
if (条件表达式1) {
语句1
} else if (条件表达式2) {
语句2
} else if (条件表达式3) {
语句3
} else {
最后的语句
}
3.2执行思路
如果条件表达式1满足就执行语句1,执行 完毕后,退出整个if分支语句
如果条件表达式1不满足,则判断条件表达式2,满足的话执行语句2
以此类推
如果所有条件都不成立执行else里面的语句
3.3案例:判断成绩
1.90分(含)以上,输出A
2.80分(含)-90分(不含),输出B
3.70分(含)-80分(不含),输出C
4.60分(含)-70分(不含),输出D
5.60分(不含)以下,输出E
//按照从大到小判断的思路
//弹出输入框让用户输入分数,保存到变量中
var score = prompt('请输入你的成绩');
//使用多分支if else if语句来分别判断输出不同的值
if (score >= 90) {
alert('优秀');
} else if (score >= 80) {
alert('很棒')
} else if (score >= 70) {
alert('继续努力')
} else if (score >= 60) {
alert('你很危险')
} else {
alert('不及格')
}
4.三元表达式
4.1语法结构
条件表达式? 表达式1: 表达式2
4.2执行思路
如果表达式为真则返回表达式1的值
如果表达式为假则返回表达式2的值
4.3案例:数字补0
用户输入数字,如果数字小于10,就在前面补0,如果大于10,则不需要补
//1.用户输入数字
var time = prompt('请输入一个0-59之间的数字');
//2.如果数字小于10则在这个数字前面补0,否则不做操作
var result = time < 10 ? '0' + time : time;
//3.用变量接收这个返回值,输出
alert(result);
四、分支结构--switch语句
1.语法结构
switch (表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}
2.执行思路
如果匹配上,就执行该case里面的语句
如果都没有匹配上,那么执行default里面的语句
3.注意事项
- 表达式经常写成变量
- 数据类型必须一致
- 如果当前的case里面没有break就不会退出switch继续执行下一个case
4.案例:水果查询
var fruit = prompt('请你输入查询的水果')
switch (fruit) {
case '苹果':
alert('苹果的价格是3.5元/斤');
break;
case '香蕉':
alert('香蕉的价格是2元/斤');
break;
case '葡萄':
alert('葡萄的价格是5元/斤');
break;
default:
alert('没有这个水果')
}
五、switch语句和if else if语句的区别
- 一般情况下,他们两个语句可以互相替换
- switch…case语句通常处理case为比较确定值的情况,而if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
- switch语句进行条件判断后直接执行到程序的条件语句,效率更大。而if…else语句有几种条件,就得判断多少次
- 当分支较少时,if…else语句的执行效率比switch语句高
- 当分支较多时,switxh语句的执行效率比较高,而且结构更清晰
六、循环结构
1.什么是循环
在程序中,一组被重复执行的语句被称之为循环体
能否继续重复执行,取决于循环的终止条件。
由循环体及循环的终止条件组成的语句,被称之为循环语句
2.循环的目的
可以重复执行某些代码
3.for循环
3.1语法结构
for (初始化变量; 条件b表达式; 操作表达式) {
循环体
}
初始化变量:就是用var声明的一个普通变量,通常用于作为计数器使用
条件表达式:就是用来决定每一次循环是否继续执行 就是终止的条件
操作表达式:就是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
3.2循环执行过程
for (var i = 1; i <= 100; i++) {
console.log('你好');
}
1.首先执行里面的计数器变量 var i=1,但是这句话在for里面只执行一次
2.i <=100 来判断是否满足条件,如果满足条件就去执行循环体,不满足条件退出循环
3.最后去执行i++ 第一轮结束
4.执行i<=100判断是否满足条件,如果满足条件就去执行循环体,不满足条件退出循环 第二轮……
3.3断点调试
F12键
浅蓝色背景在哪就证明到了那一步
3.4for循环执行相同的代码
var num = prompt('请你输入输出的次数');
for (var i = 1; i <= num; i++) {
console.log('你好');
}
3.5for循环执行不同代码
//输出一个人1-100岁
for (var i = 1; i <= 100; i++) {
console.log('这个人今年' + i + '岁了');
}
3.6案例
案例1 :求1-100之间所有整数的累加和
var sum = 0; //求和的变量
for (var i = 1; i <= 100; i++) {
// sum = sum + i;
sum += i;
};
console.log(sum); //5050
案例2:求1-100之间所有数的平均值
var sum = 0; //求和的变量
var average = 0; //平均值的变量
for (var i = 1; i <= 100; i++) {
// sum = sum + i;
sum += i;
};
average = sum / 100;
console.log(average); //50.5
案例3:求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);
案例4:求1-100之间所有能被3整除的数字的和
var result = 0;
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0) {
result += i;
}
}
console.log('1-100之间能被3整除的和是' + result);
案例5:求学生成绩案例
var num = prompt('请输入班级的总人数:'); //num是总的班级人数
var sum = 0; //求和的变量
var average = 0; //求平均值的变量
for (var i = 1; i <= num; i++) {
var score = prompt('请输入第' + i + '个学生成绩');
// 因为从prompt取过来的是字符串型的需要转换为数字型
sum = sum + parseFloat(score);
}
average = sum / num;
alert('班级总成绩是' + sum);
alert('班级总成绩平均分是' + average);
案例6:一行打印五颗星星
//一行打印五颗星星(采用追加字符串的方式打印)
var str = '';
for (var i = 1; i <= 5; i++) {
str = str + '⭐';
}
console.log(str);
4.双重for循环
4.1循环嵌套
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构
4.2语法结构
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
执行语句;
}
}
4.3执行过程
外层循环一次,里面循环全部
for (var i = 1; i <= 3; i++) {
console.log('这是外层循环第' + i + '次');
for (var j = 1; j <= 3; j++) {
console.log('这是里层循环的第' + j + '次');
}
}
4.4案例
案例1:打印五行五列星星
1.内层循环负责一行打印五个星星
2.外层循环负责打印五行
var str = '';
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 5; j++) {
str = str + '⭐';
}
//如果一行打印完毕就要另起一行
str = str + '\n';
}
console.log(str);
案例2:打印倒三角形
var str = '';
for (var i = 1; i <= 10; i++) {
for (var j = i; j <= 10; j++) {
str = str + '⭐';
}
//如果一行打印完毕就要另起一行
str = str + '\n';
}
console.log(str);
案例3:打印正三角形
var str = '';
for (var i = 1; i <= 9; i++) { //控制行数
for (var j = 1; j <= i; j++) { //控制每一行的个数
str = str + '⭐';
}
str = str + '\n';
}
console.log(str);
案例4:打印九九乘法表
案例分析:
- 一共有9行,但是每一行的个数不一样,因此需要用到双重for循环
- 外层的for循环控制行数i,循环9次,可以打印9行
- 内层的for循环控制每行公式j
- 核心算法:每一行公式的个数正好和行数一致,j<=i
var str = '';
for (var i = 1; i <= 9; i++) { //控制行数
for (var j = 1; j <= i; j++) { //控制每一行的个数
// 1 x2 = 2
str += j + 'x' + i + '=' + i * j + '\t';
}
str = str + '\n';
}
console.log(str);
4.while循环
4.1语法结构
while (条件表达式) {
循环体
}
4.2执行思路
当条件表达式结果为true则执行循环体否则退出循环
var num = 1;
while (num <= 100) {
console.log('你好');
num++;
}
里面应该也有计数器 初始化变量
里面应该也有操作表达式 完成计数器的更新 防止死循环
4.3案例
案例1:打印1-100
var i = 1;
while (i <= 100) {
console.log('这个人今年' + i + '岁了');
i++;
}
案例2:求1-100的整数和
var sum = 0;
var j = 1;
while (j <= 100) {
sum += j;
j++;
}
console.log(sum);//5050
案例3:弹出一个提示框,你爱我吗?如果输入我爱你就提示结束,否则一直询问
var message = prompt('你爱我吗?');
while (message !== '我爱你') {
message = prompt('你爱我吗?')
}
alert('我也爱你呀!')
5.do while循环
5.1语法结构
do {
循环体
} while (条件表达式)
5.2执行思路
先执行一次循环体再判断条件,如果条件表达式结果为真,则继续执行循环体,否则退出循环
5.3案例
案例1:打印1-100
var i = 1;
do {
console.log('这个人今年' + i + '岁了');
i++;
} while (i <= 100);
案例2: 求1-100的整数和
var sum = 0;
var j = 1;
do {
sum += j;
j++;
} while (j <= 100);
console.log(sum);
案例3:弹出一个提示框,你爱我吗?如果输入我爱你就提示结束,否则一直询问
do {
var message = prompt('你爱我吗?');
} while (message !== '我爱你');
alert('我也爱你呀!')
七、continue break
1.continue关键字
continue关键字用于跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue;
}
console.log('我正在吃第' + i + '个包子');
}
1.案例
求1-100之间,除了能被7整除之外的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum); //4315
2.break关键字
breake关键字用于立即跳出整个循环(循环结束)。
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('我正在吃第' + i + '个包子');
}
八、JS命名规范
1.标识符命名规范
- 变量、函数的命名必须要有意义
- 变量的名称一般用名词
- 函数的名称一般用动词
2.操作符规范
操作符的左右两侧各保留一个空格
3.单行注释
单行注释前面有一个空格
4.其他规范