一、流程控制
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。
1.分支结构
-
if语句 条件表达式要有小括号（）；注意之后有大括号{ }
// 1. 条件成立执行的代码语句
if (条件表达式) {
//当条件为 true 时执行的代码
}
// 2.if else 语句
if (条件表达式) {
// 当条件为 true 时执行的代码
}
else {
// 条件不为 true 时执行的代码
}
// 3. if else if 语句(多分支语句) 适合于检查多重条件。
if (条件表达式1) {
语句1；
}
else if (条件表达式2) {
语句2；
}
else if (条件表达式3) {
语句3；
....
}
else {
// 上述条件都不成立执行此处代码
}「三元表达式」？：
语法结构： 条件表达式 ? 表达式1 : 表达式2;
//如果条件表达式为 true ，则返回表达式1的值，如果条件表达式为 false，则返回表达式2的值var num = 10;
var result = num > 5 ? '是的' : '不是的'; //表达式是有返回值的，
console.log(result);-
switch语句（效率比if...else..更高）：当要针对变量设置一系列的特定值（即表达式）的选项时，就可以用switch
switch( 表达式) {
case value1:
// 执行代码块 1
break;
case value2:
// 执行代码块 2
break;
...
default:
// 与 case 1 和 case 2 不同时执行的代码
}执行思路：利用表达式的值和case后的选项值相匹配，若匹配上，就执行该case里面的“执行代码块”'；若都没匹配上，就执行default里面的语句。使用 break 来阻止代码自动地向下一个 case 运行。
// switch 注意事项
var num = 1; // 即若num = '3'，则控制台无输出。（对应注意事项2）
switch (num) {
case 1:
console.log(1); // 1
// 没有break，会继续执行下一个case
case 2:
console.log(2); // 2
break;
case 3:
console.log(3);
break;
}
// 1. 我们在开发里面 表达式我们经常写成变量
// 2. 我们num的值和case里面的值相匹配时 是全等 必须是值和数据类型一致才可以 num === 1
// 3.break 如果当前的case里面没有break，则不会退出switch，是继续执行下一个case，直到遇到break为止-
switch 语句和 if else if 语句的区别
① 一般情况下，它们两个语句可以相互替换
② switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
③ switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
④ 当分支比较少时，if… else语句的执行效率比 switch语句高。
⑤ 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
2.循环结构
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
-
for 循环
for 重复执行某些代码，通常跟计数有关
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}初始化变量：就是用var关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行，如果结果是true就继续循环，否则退出循环
操作表达式：每次循环的最后都要执行的表达式。通常用于更新计数器变量的值（递增或递减）
for (var i = 1 ; i <= 100 ; i++) {
console.log("你好吗?");
}
// for循环的执行过程
// 1.首先执行里面的初始化变量 var i = 1 ，但是这句话在for里面只执行一次
// 2.接着去i <= 100 里面判断是否满足条件，如果满足条件，就去执行 循环体，不满足条件就退出循环
// 3.最后去执行 i++ ，i++是单独写的代码，递增，第一轮结束
// 4.接着去执行 i <= 100,如果满足条件，就去执行 循环体，不满足条件就退出循环...
//可以让用户控制输出次数，重复执行相同的代码
var num = prompt('请输入次数');
for (var i = 1 ; i <= num ; i++) {
console.log('hello');
}
//可以重复执行不同的代码
for (var i = 1; i <= 20 ; i++) {
if (i == 18) {
console.log('18岁成年快乐');
} else {
console.log('这个人今年'+i+'岁了');
}
}「执行流程」
-
初始化变量，初始化操作在整个 for 循环只会执行一次。
-
执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
-
执行操作表达式,此时第一轮结束。
-
第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
-
继续执行操作表达式，第二轮结束。......
案例：
/* 要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩 */
var amount = prompt('请输入班级人数：');
var sum = 0;
for (var num = 1 ; num <= amount ; num++) {
var grade = prompt('请输入第' + num + '个学生的成绩');
sum += parseFloat(grade);
}
var avg = sum / amount;
alert('班级总成绩为：'+sum+' 平均成绩为：'+avg);
//若没有用parseFloat()将grade由字符型转换为数字型，那么输出结果显示错误如：班级总成绩为：0908978平均成绩为：302992.6666666667
「双重for循环」
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
//for循环打印九九乘法表
var str = "";
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + "x" + i + "=" + j * i + "\t";
}
str += "\n";
}
console.log(str);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//打印倒三角形，要求10行10列
str = '';
for (var i = 1 ; i <= 10 ; i++) {
for (var j = i ; j <= 10 ; j++) { //注意 j=i ！！
str += '☆';
}
str += '\n';
}
console.log(str);
</script>
</head>
</html>for循环小结
- for 循环可以重复执行某些相同代码
- for 循环可以重复执行些许不同的代码，因为我们有计数器
- for 循环可以重复执行某些操作，比如算术运算符加法操作
- 随着需求增加，双重for循环可以做更多、更好看的效果
- 双重 for 循环，外层循环一次，内层 for 循环全部执行
- for 循环是循环条件和数字直接相关的循环
-
while循环
while (条件表达式) {
// 循环体代码
}
// 1. 先执行条件表达式，如果结果为 true，则执行循环体代码；
// 如果为 false，则退出循环，执行后面代码
// 2. 执行循环体代码 注意不要陷入死循环 i++要记住
// 3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，
//计算1-100之间所有整数的和
var sum = 0;
var i = 1;
while (i <= 100) { //注意i要事先定义，与for循环（在表达式中定义）不同
sum += i;
i++; //若没有i++，那么将陷入死循环，i永远等于1，永远为true
}
console.log(sum);
do-while循环
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while (条件表达式); //注意有分号
// 先执行一次循环体代码，再执行条件表达式 .如果条件表达式为真，则继续执行循环体，否则退出循环
注：先执行循环体，再判断，我们会发现do...while循环语句至少会执行一次循环体代码
//计算1-100之间所有整数的和 do ... while循环
var sum = 0;
var i = 1;
do {
sum += i;
i++; // 注意i++不要漏了
} while (i<=100);
console.log(sum);循环小结：
- JS 中循环有 for 、while 、 do while
- 三个循环很多情况下都可以相互替代使用
- 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用 for
- while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些
- while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行
- while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体， 而 while 可能一次也不执行
- 实际工作中，我们更常用for 循环语句，它写法更简洁直观， 所以这个要重点学习
continue、break
continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。break 关键字用于立即跳出整个循环（循环结束）。
// 求1-100之间，除了能被7整除之外的整数和
var sum = 0;
for (var i = 1; i <= 100;i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum);
扫一扫
1577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
