流程控制语句分类,switch基本结构,switch穿透性及break,switch语句default,switch案例分数评级,for...in语句,while及do while语句,break及continue终止循环。
1.程序的三种基本结构
- 顺序结构:按照顺序一条一条执行,从上至下;
- 分支结构:执行的时候,可以根据条件进行选择,条件越多对应的结果越多,分支也就越多。if...else if...else...语句,switch语句;
- 循环结构:重复的做一件事情,如果不给条件,就会无限执行。可以限制重复的次数。for循环,for...in循环,while循环,do while循环,forEach循环等;
2.分支结构——if语句
if...else if...else...语句,switch语句
// 单条件判断
if(判断条件){//....}
if(判断条件){
//....
}else{
//....
}
// 多条件判断
if(判断条件1){
//....
}else if(判断条件2){
//....
}else if(判断条件3){
//....
}else{
//....
}
3.分支结构——switch语句
switch (表达式||变量) {
case value1:
console.log('执行的代码1');
break;
case value2:
console.log('执行的代码2');
break;
case value3:
console.log('执行的代码3');
break;
default:
console.log('执行的代码4');
break;
}
- switch后面的小括号内可以写变量 || 表达式,一般都是变量。
- value是与括号里的内容作比较的,这个比较是全等的比较。
- 一旦满足全等的条件,就会执行后续的代码。
- default,以上条件都不满足时候,执行这里对应代码。
- default可以放在任何位置。
4.switch语句案例:判断今天星期几
<!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>Switch分支结构:判断今天星期几</title>
</head>
<body>
<input type="text">
<button>今天星期几?</button>
<Script>
var txt = document.querySelector("input");
var btn = document.querySelector("button");
btn.onclick = function(){
var txtVal = txt.value;
//switch是将括号里面的内容和case后面的条件进行全等判断,因此类型和数值都必须相等
switch(txtVal){
case '1':
console.log("今天是星期一");
break;
case '2':
console.log("今天是星期二");
break;
case '3':
console.log("今天是星期三");
break;
case '4':
console.log("今天是星期四");
break;
case '5':
console.log("今天是星期五");
break;
case '6':
console.log("今天是星期六");
break;
case '7':
console.log("今天是星期天");
break;
default:
console.log("您输入的日期不合法!");
break;
}
};
</Script>
</body>
</html>
结果:
5.switch语句的穿透性及break
穿透:一旦符合条件,并且没有break终止后续代码,会产生穿透问题,当前满足条件的位置开始,后续的执行代码,都会被执行。
(解决穿透问题)break:break后面的代码会终止执行,并跳出。
当上例,不写break时:
<Script>
var txt = document.querySelector("input");
var btn = document.querySelector("button");
btn.onclick = function(){
var txtVal = txt.value;
//switch是将括号里面的内容和case后面的条件进行全等判断,因此类型和数值都必须相等
switch(txtVal){
case '1':
console.log("今天是星期一");
case '2':
console.log("今天是星期二");
case '3':
console.log("今天是星期三");
case '4':
console.log("今天是星期四");
case '5':
console.log("今天是星期五");
case '6':
console.log("今天是星期六");
case '7':
console.log("今天是星期天");
default:
console.log("您输入的日期不合法!");
}
};
</Script>
发现:最后的结果将所有的情况都输出了,这是不合理的。
因此需要使用break,当某个条件成立时,跳出当前分支,结束流程。
6.switch穿透的好处
有时候能通过穿透性使代码更加简洁,性能更好。
更改上例:当输入是工作日时输出“今天是工作日”,当输入是周末时输出“今天是周末”
<!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>switch穿透性的好处</title>
</head>
<body>
<input type="text">
<button>今天是工作日吗?</button>
<Script>
//当输入是工作日时输出“今天是工作日”,当输入是周末时输出“今天是周末”
var txt = document.querySelector("input");
var btn = document.querySelector("button");
btn.onclick = function(){
var txtVal = txt.value;
//switch是将括号里面的内容和case后面的条件进行全等判断,因此类型和数值都必须相等
switch(txtVal){
case '1':
case '2':
case '3':
case '4':
case '5':
console.log("今天是工作日");
break;
case '6':
case '7':
console.log("今天是周末");
break;
default:
console.log("您输入的日期不合法!");
break;
}
};
</Script>
</body>
</html>
结果:当输入1-5时显示是工作日,输入6-7时显示是周末
7.switch语句——default
- 所有的switch语句都可以使用if语句替换。但是如果可以使用switch语句时,推荐使用switch语句,更加简洁清晰。
- 但是在判断条件和括号里面的值不是全等的情况下,不能使用switch语句,这时就必须使用if语句。
- 当所有条件都不满足时,switch语句使用default,而if语句中使用else;
- default可以写在switch语句中的任何位置,但是推荐使用在最下面
<!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>所有switch语句都可以使用if语句替换</title>
</head>
<body>
<input type="text">
<button>今天是工作日吗?</button>
<Script>
//当输入是工作日时输出“今天是工作日”,当输入是周末时输出“今天是周末”
var txt = document.querySelector("input");
var btn = document.querySelector("button");
btn.onclick = function(){
var txtVal = txt.value;
//switch是将括号里面的内容和case后面的条件进行全等判断,因此类型和数值都必须相等
// switch(txtVal){
// case '1':
// case '2':
// case '3':
// case '4':
// case '5':
// console.log("今天是工作日");
// break;
// case '6':
// case '7':
// console.log("今天是周末");
// break;
// default:
// console.log("您输入的日期不合法!");
// break;
// }
if(txtVal === '1' || txtVal === '2' || txtVal === '3' || txtVal === '4' || txtVal === '5'){
console.log("今天是工作日");
}else if(txtVal === '6' || txtVal === '7'){
console.log("今天是周末");
}else{
console.log("您输入的日期不合法!");
}
};
</Script>
</body>
</html>
发现结果一致。且switch中的default和if语句中的else功能一致。
8.switch:分数评级案例
当发现判断条件是在某一段范围是,可以通过在switch括号中写上布尔值,在case条件中写条件,这样switch括号中的布尔值就可以和case条件的结果进行全等比较。
<!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>分数评级</title>
</head>
<body>
<input type="text">
<button>评级</button>
<script>
var txt = document.querySelector("input");
var btn = document.querySelector("button");
btn.onclick = function(){
var score = txt.value;
//可以通过在switch括号中写上布尔值,在case条件中写条件,这样switch括号中的布尔值就可以和case条件的结果进行全等比较
switch(true){
//成绩输入有可能输入超过100或小于0,所以需要限定完全
case score>=90 && score<=100 :
console.log("优秀");
break;
case score>=60 && score<90 :
console.log("良好");
break;
case score>=0 && score<60 :
console.log("不合格");
break;
default :
console.log("成绩有误");
break;
}
};
</script>
</body>
</html>
结果:
9.for..in循环
回顾for循环:
- 初始化变量;
- 判断当前for循环结束条件;
- 更改判断条件;
for(初始化;循环条件;变更条件){
//满足循环执行的代码...
}
for循环的用处:用于给获取到的元素批量获取数组的值,批量添加样式等。
- 但是对于object对象这种的复杂对象,for循环无法获取到对象中的值。因为object对象格式的对象没有length属性,所以不能使用for循环,将object对象的长度作为循环结束的条件。因此不能使用for循环,将object对象的长度作为循环结束的条件。所以只能使用for...in循环。
- for in循环也可以获取到数组的值,但是数组一般不需要拿到key值,所以对于数组不推荐使用for in循环
for...in循环格式:
for(var key in obj){
//这里的key指的就是对象下的属性
}
对于Object复杂对象通过for...in循环获取key和value:
//对于object对象这种的复杂对象,for循环无法获取到对象中的值,所以只能使用for...in
var obj = {
name:'lmf',
age:20,
tel:'13316789876'
}
//object对象格式的对象没有length属性,所以不能使用for循环,将object对象的长度作为循环结束的条件
// console.log(obj.length);//undefined
for( var key in obj){
//通过key就可以获取到key对应的value值
console.log(key+" : "+obj[key]);
}
结果:
for in循环也可以获取到数组的值,但是数组一般不需要拿到key值,所以对于数组不推荐使用for in循环:
//for in循环也可以获取到数组的值,但是数组一般不需要拿到key值,所以对于数组不推荐使用for in循环
var arr = [true,10,'1','a'];
for(var i in arr){
console.log(arr[i]);
}
结果:
10.while和do while循环
10.1 while(前测试循环语句)
先判断条件是否成立,再执行代码
格式:
while(判断条件){
//需要循环的代码
}
for循环和while循环使用:
- for循环:更适合已知执行次数的情况,例如,我们要获取数组中的每一位的值;
- while循环:更适合未知的执行次数的情况。
10.2 do while(后测试循环语句)
先执行代码再判断条件,至少会执行一次代码。
格式:
do{
//需要循环执行的代码
}while(
//判断条件
)
10.3 需求:找到第一个大于23的数。
使用for循环:
<script>
//需求:找到第一个大于23的数
var arr = [10,23,56,98,34];
//如果使用for循环
console.log("使用for循环打印的结果:");
for(var i=0;i<arr.length;i++){
if(arr[i]>23){
console.log(arr[i]);
}
}
结果:发现会将大于23的所有数据都打印出来,不符合需求
使用while循环:
<!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>while循环</title>
</head>
<body>
<script>
//需求:找到第一个大于等于23的数
var arr = [10,23,56,98,34];
//如果使用for循环
// console.log("使用for循环打印的结果:");
// for(var i=0;i<arr.length;i++){
// if(arr[i]>23){
// console.log(arr[i]);
// }
// }
console.log("使用while循环打印的结果:");
var num = 24;
var i = 0;
//注意:需求是找第一个大于23的数,所以循环条件是,只要小于23都会执行
while(arr[i]<num){
//i++在判断条件前面,因为循环条件已经判断了arr[i]<num,所以arr[i]>=num已经不可能了,所以只需要判断下一个是否>=num即可得到
i++;
//这里需要同时判断两者是否相等,因为有可能给出的num就是数组中的某个值,否则不会有任何打印结果
if(arr[i]>=num){
console.log(arr[i]);
}
}
</script>
</body>
</html>
结果:符合需求。
同样的需求,使用do while:(while条件中使用了while(arr[i-1]<num)),使用i-1判断的还是i++前的数,所以这里使用do...while不推荐,因为可以先判断了有循环条件再执行,效果更好。
<script>
var arr = [10,23,56,98,34];
console.log("使用do while循环打印的结果:");
var i = 0;
var num = 27;
do{
console.log(i);
if(arr[i]>=num){
console.log(arr[i]);
}
//这里因为是判断arr[i]>num是否成立,所以i++需要写在判断条件后面
i++;
//因为可能num是数组中某个值,但是i++前还未判断到,所以需要同时判断是否等于num
}while(arr[i-1]<num);
</script>
结果:
11.break,continue终止循环
break(打破)
- 终止当前循环,包括break后面的代码也会被停止执行,并且跳出该循环。
- break只能跳出当前循环,如果有多个for循环,break是不会跳出所有循环的。要使其跳出所有循环,需要在每个循环中使用break
- break跳出循环后,本循环break后的所有代码都不会再执行
continue(持续)
- 终止本次循环,包括continue后面的代码也会被停止执行,但是不跳出整个循环,循环会在这次之后,继续执行。
for循环问题重现:使用for循环找到第一个大于或等于23。问题:会打印大于或等于23的所有数据
解决:在第一次打印第一个大于或等于23的数据时,直接使用break跳出整个循环即可。
<!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>for循环问题重现</title>
</head>
<body>
<script>
var arr = [10,23,56,98,34];
var num = 23;
console.log("使用for循环打印的结果:");
for(var i=0;i<arr.length;i++){
if(arr[i]>=num){
console.log(arr[i]);
break;
console.log("break后的代码");
}
}
</script>
</body>
</html>
结果:console.log("break后的代码");并没有打印
注意:break只能跳出当前循环,如果有多个for循环,break是不会跳出所有循环的
continue:当数组中数据等于5时终止循环
<script>
for (var i = 0; i < 10; i++) {
if(i==5){
continue;
console.log("continue后的代码");
}
console.log(i);
}
</script>
结果:发现只有i=5时未打印,且console.log("continue后的代码");并没有打印