JavaScript流程控制-分支
1.流程控制
流程控制分为顺序结构、分支结构和循环结构三种
2.顺序流程控制
顺序结构没有特定的语法结构，程序会按照代码的先后顺序依次执行。
3.分支流程控制if语句
3.1 分支结构
根据不同的条件，执行不同的路径代码，从而得到不同的结果
JS的两种分支结构语句
- if语句
- switch语法
3.2 if语句
案例：进入网吧
弹出一个输入框，要求用户输入年龄，如果年龄大于18岁，允许进入网吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var age=prompt('请输入您的年龄');
if(age>=18){
alert('允许进入网吧');
}
</script>
</head>
<body>
</body>
</html>
3.3 if else双分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var age=prompt('请输入您的年龄');
if(age>=18){
alert('允许进入网吧');
}else{
alert('回家写作业去');
}
</script>
</head>
<body>
</body>
</html>
案例:判断闰年
接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var year=prompt('请输入年份：')
if(year%4==0&&year%100!=0||year%400==0){
alert('您输入的年份是闰年');
}else{
alert('您输入的年份是平年');
}
</script>
</head>
<body>
</body>
</html>
3.4 if else if 语句（多分支语句）
案例：判断成绩级别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var score=prompt('请您输入分数');
if(score>=90){
alert('你是我的骄傲');
}else if(score>=80){
alert('你很出色了');
}else if(score>=70){
alert('要继续努力');
}else if(score>=60){
alert('你很危险');
}else{
alert('不及格');
}
</script>
</head>
<body>
</body>
</html>
4.三元表达式
语法结构:
条件表达式？表达式1：表达式2
执行思路：如果条件表达式结果为真，则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num=10;
var result=num>5?'是的':'不是';
console.log(result);
//等同于：
// if(num>5){
// result='是的';
// }else{
// result='不是';
// }
// </script>
</head>
<body>
</body>
</html>
案例：数字补零
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var time=prompt('请输入一个0-59之间的一个数字');
var result=time<10? '0'+time:time;
alert(result);
</script>
</head>
<body>
</body>
</html>
5.分支流程控制switch语句
5.1语法结构
switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
switch(2){
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配结果')
}
</script>
</head>
<body>
</body>
</html>
注意事项：
- 开发里面，表达式经常写成变量
- 变量的值和case里面的值相匹配的时候是全等，必须是值和数据类型一致才可以
- 如果当前case里面没有break，则不会退出switch,会继续执行下一个case
案例：查询水果案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var fruit=prompt('请您输入查询的水果');
switch(fruit){
case '苹果':
alert('苹果的价格是3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是35/斤');
break;
default:
alert('没有此水果');
}
</script>
</head>
<body>
</body>
</html>
5.2 switch语句和if else if语句的区别
- 一般情况下，他们两个语句可以相互替换
- switch...case语句通常处理case为比较确定值的情况，而if...else...语句更灵活，常用于范围判断（大于、等于某个范围）
- switch语句进行条件判断后直接执行到程序的条件语句，效率较高。而if..else...语句有几种条件，就得判断多少次。
- 当分支比较少时，if...else语句的执行效率比switch语句高
- 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
七 JavaScript流程控制-循环
1. 循环
1.1循环的目的：
在实际问题中，有许多具有规律性的操作，因此在程序中要完成这类操作就需要重复执行某些语句。
1.2 JS中的循环
在JS中，主要有三种类型的循环语句：
- for 循环
- while 循环
- do...while循环
2. for循环
在程序中，一组被重复执行的语句被称为循环体，能否重复执行，取决于循环的终止条件。由循环体及循环的中止条件组成的语句，被称为循环语句。
2.1语法结构
for循环主要用于把某些代码循环若干次，通常跟计数有关系。
语法结构：
for(初始化变量；条件表达式；操作表达式){
//循环体
}
初始化变量： 就是用var声明的一个普通变量，通常用于作为计数器使用
条件表达式： 就是用来决定每一次循环是否继续执行，也就是终止条件
操作表达式：是每次循环最后执行的代码，经常用于我们计数器变量进行更新（递增或者递减）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(var i=1;i<=100;i++){
console.log('你好');
}
</script>
</head>
<body>
</body>
</html>
补充：断点调试
2.2 for循环重复相同的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(var i=1;i<=100;i++){
console.log('这个人今年'+i+'岁了');
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// for(var i=1;i<=100;i++){
// console.log('这个人今年'+i+'岁了');
// }
for(var i=1;i<=100;i++){
if(i==1){
console.log('这个人一岁了');
}else if(i==100){
console.log('这个人1一百岁了');
}else{
console.log('这个人今年'+i+'岁了');
}
}
</script>
</head>
<body>
</body>
</html>
2.4 for循环重复某些相同操作
for循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。
案例：求1-100之间所有整数的累加和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var sum=0;
for(var i=1;i<=100;i++){
sum+=i;
}
console.log(sum);
</script>
<body>
</body>
</html>
案例：求1-100之间所有偶数和奇数的和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//求1-100之间所有偶数和奇数的和
var even=0;
var odd=0;
for(var i=1;i<=100;i++){
if(i%2==0){
even=even+i;
}else{
odd=odd+i;
}
}
console.log('1-100之间的偶数和：'+even);
console.log('1-100之间的奇数和：'+odd);
</script>
</head>
<body>
</body>
</html>
案例:求学生成绩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num=prompt('请输入班级的总人数');
var sum=0;
var average=0;
for(i=1;i<=num;i++){
var score = prompt('请输入第'+i+'个学生的成绩');
sum=sum+parseFloat(score);
}
average=sum/num;
alert('班级平均结果是'+sum);
alert('班级平均分是'+average);
</script>
</head>
<body>
</body>
</html>
案例：一行打印5个星星
追加字符串的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str='';
for (var i=1;i<=5;i++){
str=str+'⨁';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
3. 双重for循环
3.1 双重for循环概述
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。
案例：打印五行五列星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str='';
for (var i=1;i<=5;i++){
str=str+'⨁';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
案例：打印n行n列星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str=''
var rows=prompt('请您输入行数：');
var cols=prompt('请您输入列数：');
for(var i=1;i<=rows;i++){
for(var j=1;j<=cols;j++){
str=str+'⨁';
}
str+='\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
案例：打印倒三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str=''
for(var i=1;i<=10;i++){
for (var j=i;j<=10;j++){
str=str+'⨁'
}
str+='\n'
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
案例：九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str=''
for(var i =1;i<=9;i++){
for(var j=1;j<=i;j++){
str+=j+'x'+i+'='+i*j+'\t'
}
str+='\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
4. while循环
- while语句可以在条件表达式为真的前提下，执行循环指定的一段代码，直到表达式不为真时结束循环。
- while循环语法结构：
while(条件表达式){
//循环体
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num=1;
while(num<=100){
console.log('how are you');
num++;
}
</script>
</head>
<body>
</body>
</html>
while案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//打印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);
//弹出提示"你爱我吗？"
var message=prompt('你爱我吗');
while(message!=='我爱你'){
messsage=prompt('你爱我吗？')
}
alert('哈哈哈');
</script>
</head>
<body>
</body>
</html>
5. do while循环
-
语法结构：do{
//循体体
}while(条件表达式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var i=1;
do{
console.log('how are you');
i++;
}while(i<=100)
</script>
</head>
<body>
</body>
</html>
注意：先执行循环体，再判断，do...while 循环语句至少会执行一次循环体代码。
do while循环案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1.打印1-100岁
var i =1;
do{
console.log('这个人今年'+i+'岁了');
i++;
}while(i<=100)
//2.你爱我吗？
do{
var message=prompt('你爱我吗？');
}while(message !=='我爱你')
alert('哈哈哈')
</script>
</head>
<body>
</body>
</html>
*循环小结
三个循环很多情况下都可以相互替代使用。
如果是用来计次数，跟数字相关的，三者使用基本相同，但我们更喜欢用for
while 和 do while 可以做更复杂的判断条件，比for循环灵活一些。
while 先判断后执行，do...while先执行一次，再判断执行。
do while 至少执行一次循环体，while 可能一次也不执行。
6. continue break
6.1 continue 关键字
用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会不执行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(var i =1;i<=5;i++){
if(i==3){
continue ;
}
console.log('我正在吃第'+i+'个包子');
}
//求1-100之间，除了能被7整除之外的整数和
var sum=0;
for(var i=1;i<=100;i++){
if(i%7==0){
continue;
}
sum+=i;
}
console.log(sum);
</script>
</head>
<body>
</body>
</html>
6.2 break关键字
break关键字用于跳出整个循环（循环结束）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//break 退出整个循环
for(var i=1;i<=5;i++){
if(i==3){
break;
}
console.log('我正在吃第'+i+'个包子');
}
</script>
</head>
<body>
</body>
</html>
