首页 > 网站开发 > JavaScript教程 >
-
WEB前端第二十四课——js流程控制
1.分支语句
分支结构的执行是依据一定的执行条件选择路径,而不是严格按照语句出现的物理顺序执行
分支结构程序设计的关键在于构造合适的分支条件和分析程序流程,根据不同的流程选择适当的分支语句
2.常用分支语句
① if,先判断条件表达式的布尔值,然后根据结果的真伪选择执行不同的语句
书写格式:if(条件表达式){
判结果为真时执行语句;
}
表达式必须放在小括号内,执行语句必须放在大括号内
条件表达式后不加分号,如果执行语句只有一句,则大括号可以不写,但建议所有情况都使用大括号
② if else,是 if语句的升级版本,如果判断条件表达式结果为真则执行语句1,如果判断条件表达式结果为假则执行语句2
书写格式:if(条件表达式){
结果为真时执行语句1;
}else{
结果为假时执行语句2;
}
③ if else if else,需要对一个变量进行多次条件判断时,可以使用此分支结构,是 if else结构的嵌套形式
书写格式:if(条件表达式1){
表达式1结果为真时执行语句1;
}else if(条件表达式2){
表达式2结果为真时执行语句2;
}……
else{
前面表达式结果为假时执行语句n;
}
else语句不能单独存在,总是向上匹配离它最近的 if 语句
④ switch,与 if else if else结构表达含义类似
书写格式:switch(表达式){
case"情况1":{执行语句1};
break;
case"情况2":{执行语句2};
break;
… …
default:{执行语句n}
}
3.循环语句
有循环体和循环终止条件两部分组成
常用循环语句:
① while,包含一个循环条件和一段代码块,事先不确定循环次数,只要条件为真就重复执行代码块,直到条件为假时终止
语法格式:while(条件表达式){
条件为真时执行的语句;
变量增减;
}
while循环注意事项:
由于while循环是先判断循环条件,因此while循环的最少执行次数是 0次
while循环之所以能够结束,是因为每次循环执行的过程中都会改变循环变量
执行while循环之前,必须给循环变量设置初始值
与if语句一样,如果while循环体中只有一条语句,那么大括号可以不加,但不推荐
while循环结构末尾不需要加分号
循环条件恒成立的循环被称作死循环
② do while,与while循环结构基本相同,不同的是do while循环是先执行循环体再进行条件判断
语法格式:do{
执行语句;
}while(条件表达式);
③ for,包括标准 for循环和 快速遍历(增强for)两种,通常意义上的 for循环指的是标准 for循环
4.标准for循环:
语法格式:for(表达式1;表达式2;表达式3){
循环体语句;
}
代码示例:
for(var num=0;num<10;num++){
console.log(num);
}
上述代码试译:
首先执行表达式1,声明num变量并进行初始化赋值;
然后执行表达式2进行判断,结果为真则执行循环体,否则跳出循环;
当表达式2为真,且循环体执行完一次后,执行表达式3,然后重复第二步。
注意事项:
for循环表达式1可以不写,如果不写,则需要在循环结构外声明变量并初始化赋值
for循环表达式2可以不写,如果不写,则循环条件恒成立,为死循环
for循环表达式3可以不写,如果不写,则需要在循环结构内部为循环变量改变设置条件
示例:
var num=0;
for(;num<10;){
console.log(num);
num++;
}
归纳:根据以上所述,for 循环的三个条件表达式都可以不写,但括号中的分号不能省略!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html lang= "en" > <head> <meta charset= "UTF-8" > <title>斐波那契数列</title> </head> <body> <script> var num1=1 var num2=1 document.write(num1+ "<br/>" ); document.write(num2+ "<br/>" ); for ( var i=1;i<=10;i++){ var num3=num2+num1; num1 = num2; num2 = num3; document.write(num3+ "<br/>" ) } </script> </body> </html> |
5.快速遍历(增强for):
是一种苦熬苏浏览容器内元素的手段,不论容器内有多少元素,一定都能循环一遍
语法格式:for(var 变量名 in 容器){
循环体;
}
示例:
var arr=[1,2,3,4,5,6];
for(var num in arr){
console.log(arr[num]);
}
代码释意:创建一个局部变量 num,从数组 arr逐个取出每个元素下标赋值给 num,并打印这个元素的值
6.循环的嵌套使用
循环和条件语句可以进行嵌套使用,从而进行复杂的逻辑处理
代码示例:
for(var num=0;num<100;num++){
if(num%5==0){
console.log(num);
}
}
for(var i=0;i<10;i++){
for(var j=0;j<10;j++){
document.write(i*j);
}
}
7.循环嵌套代码实例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html lang= "en" > <head> <meta charset= "UTF-8" > <title>九九乘法表</title> </head> <body> <script> for ( var i=1;i<10;i++){ for ( var j=1;j<=i;j++){ document.write(j+ "*" +i+ "=" +j*i+ " " + " " ); } document.write( "<br/>" ) } </script> </body> </html> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<title>等腰三角形</title> //实现方式一 <script> var res= "" ; for ( var i=1;i<=5;i++){ var blank= "" ; for ( var j=1;j<=5-i;j++){ blank+= " " ; } var star= "" ; for ( var k=1;k<2*i;k++){ star+= "*" ; } res+=blank+star+ "\n" ; } console.log(res) </script> //实现方式二 <script> for ( var i=1;i<=5;i++){ for ( var j=1;j<=5-i;j++){ document.write( " " ); } for ( var k=1;k<2*i;k++){ document.write( "*" ); } document.write( "<br/>" ); } </script> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//100以内奇数和偶数求和 <script> var sum_even=0; var sum_odd=0; //for循环 for ( var i=1;i<=100;i++){ if (i%2==0){ sum_even+=i; } if (i%2!=0){ sum_odd+=i; } } document.write( "for循环运算:" + "<br/>" ); document.write(sum_even+ "<br/>" ); document.write(sum_odd+ "<hr/>" ); // while循环 while (i<=100&& i%2==0){ sum_even+=i; } while (i<=100&& i%2!=0){ sum_odd+=i; } document.write( "while循环运算:" + "<br/>" ); document.write(sum_even+ "<br/>" ); document.write(sum_odd); </script> |
8.break和continue语句
break语句用于跳出整个循环语句,循环终止不再执行
continue语句用于终止本轮循环,返回循环头部,继续执行下一轮循环,整个循环不终止
出处:https://www.cnblogs.com/husa/p/13511104.html