一、流程控制语句
前提介绍:
- 顺序结构语句 js默认由上至下执行
- 分支结构语句 js会根据条件的判断,决定是否执行某段代码
- 循环结构语句 js会根据条件的判断,反复的执行某段代码
1. prompt函数
prompt()方法用于显示可提示用户进行输入的对话框。
这个方法返回用户输入的字符串。
var age = parseInt(prompt('请输入您的年龄:'));
alert(age);
2. if语句
1.概述
if 语句是 JavaScript 中最常用的分支结构,它用于判断某个条件是否成立,如果成立,就执行指定的代码块。
if 语句的基本语法如下:
if (条件) {
// 真区间:当条件为 true 时执行的代码
}
- 其中()里面的
条件
是一个表达式,可以是任何能够返回 true 或 false 的值; - 如果是其他类型,会隐式转换为布尔型;
- 如果
条件
返回 true,那么就会执行花括号内的代码块,返回false,则不执行; - 请使用小写的if。使用大写字母(IF)会生成 JavaScript 错误;
2.案例练习
-
在弹框中输入您的年龄,如果年龄大于18,弹出欢迎来到红浪漫,如果年龄不大于18,则不显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var age = parseInt(prompt('请输入您的年龄:')) if(age > 18) { alert("欢迎来到红浪漫,男宾2位."); } </script> </body> </html>
3. if else语句
1. 概述
if…else 语句是 if 语句的扩展,它允许在条件成立和不成立时分别执行不同的代码块。
if…else 语句的基本语法如下:
if (条件) {
// 真区间:当条件为 true 时执行的代码
} else {
// 假区间:当条件为false时执行的代码
}
- 其中()里面的
条件
是一个表达式,可以是任何能够返回 true 或 false 的值; - 如果是其他类型,会隐式转换为布尔型;
- 如果
条件
返回 true,那么就会执行真区间
的代码块; - 如果
条件
返回 false,那么就会执行假区间
的代码块;
2. 案例练习
-
在弹框中输入您的年龄,如果年龄大于18,弹出欢迎来到红浪漫,否则弹出未成年不能进入。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var age = parseInt(prompt('请输入您的年龄:')) if(age > 18) { alert("欢迎光临~"); }else{ alert("未成年禁止访问"); } </script> </body> </html>
4. if…else if…else 语句
1. 概述
if…else if 语句可以检查多个条件,并在条件成立时执行相应的代码块。
if…else if 语句的基本语法如下:
if (条件1) {
// 真区间1:当条件为 true 时执行的代码
} else if (条件2) {
// 真区间2:当条件为 true 时执行的代码
// 可以有N多个else if
} else {
// 假区间:当条件为false时执行的代码
}
2. 案例练习
-
在弹框中输入您的成绩,如果分数少于60,弹出努力吧少年,
如果分数在60到80之间,弹出及格,
如果成绩在80到90之间弹出良好,
如果分数在90到100之间弹出优秀,
如果分数是100,则弹出你可以毕业了,告辞!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var score = parseInt(prompt('请输入你的成绩:')) if (score < 60 && score >= 0) { alert('努力吧少年'); } else if (60 <= score && score < 80) { alert('及格'); } else if (80 <= score && score < 90) { alert('良好'); } else if (90 <= score && score < 100) { alert('优秀'); } else if (score == 100){ alert('毕业了,你可以起飞了'); } </script> </body> </html>
5. switch…case语句
1. 概述
与 if - else if
语句的多分支结构类似,都可以根据不同的条件来执行不同的代码;但是与 if else 多分支结构相比,switch case 语句更加简洁和紧凑,执行效率更高。
基本语法如下:
var n = 2;
switch (n) {
case 1:
console.log('n的值是1');
break;
case 2:
console.log('n的值是2');
break;
case 3:
console.log('n的值是3');
break;
default:
console.log('前面都没匹配上');
}
- 首先设置表达式 n(通常是一个变量),随后会用表达式的值与每个 case 的值做
严格
比较。 - 如果结果为真,则与该 case 关联的代码块会被执行,结果为假,则判断下一个case。
- 通常会使用 **break **来阻止代码自动地向下一个 case 运行。
2. 案例练习
-
在弹框中输入1~5的评分:
如果输入1,则弹出非常满意,
如果输入2,则弹出满意,
如果输入3,则弹出一般,
如果输入4,则弹出不满意,
如果输入5,则弹出非常不满意,
否则弹出关门吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var operation = prompt('请输入你的操作序号:')
switch(operation){
case '1':
console.log('非常满意');
break;
case '2':
console.log('满意');
break;
case '3':
console.log('一般');
break;
case '4':
console.log('不满意')
break;
case '5':
console.console.log('非常不满意');
break;
default:
console.log('关门吧');
}
</script>
</body>
</html>
6. while循环
1. 概述
思考:在控制台上打印1到10可以吗?打印1到100呢?1000?10000?1000000000?
while循环的基本格式:
while (循环条件) {
循环体
}
- 如果‘条件’为true,则执行循环体;
- 循环体执行完毕,会再次判断‘条件’;
- 如果‘条件’还为true,则再次执行循环体,直到‘条件’返回false;
- 如果‘条件’一直为true,则是死循环(可以用break终止循环)。
2. 案例练习
-
用while循环输出1~3
var i = 1; while (i < 4) { console.log(i); i++; //自增 }
-
用while循环输出1~100
-
用while循环输出10~1
7. for循环
1. 概述
for循环的基本格式:
for (1.初始化; 2.循环条件; 3.自增自减) {
4.循环体
}
- 先执行‘1.初始化’,再判断‘条件’;
- 如果为true,则执行‘循环体’;
- 执行完循环体,会执行‘3.自增自减’,然后再判断‘条件’;
- 直到‘条件’返回false,结束循环,否则为死循环
2. 案例练习
-
打印1到100的数字
for(var i = 1; i <= 100; i++) { console.log(i); }
-
求1到10的和(55)
-
求1到100的和(5050)
-
求1-100中的偶数
-
求1-100中的偶数的和(2550)
-
求1-100中是3的倍数的数字和(1683)
-
求1~100中7的倍数或尾数带7的整数
-
判断12是不是质数
| 质数:是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数。
-
在页面中输入一个数判断是不是质数
-
2-100中所有的质数
-
九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法算表</title>
</head>
<body>
<div id="box">
</div>
<script>
var oBox = document.getElementById("box");
for (var i = 1; i < 10; i++) {
for (var j = 1; j <= i; j++) {
var math = j + "*" + i + "=" + j*i+" ";
oBox.innerHTML = oBox.innerHTML + math;
}
oBox.innerHTML += "<br>";
}
</script>
</body>
</html>
-
for in循环
for/in 语句循环遍历对象的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for in循环</title> </head> <body> <script> var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){ console.log(x + ' ' + person[x]+'\n'); } </script> </body> </html>
8. do while循环
-
do/while 循环是 while 循环的变体。在检查条件是否为真之前,这种循环会执行一次代码块,然后只要条件为真就会重复循环
-
语法结构:do {
要执行的代码块
}while (条件);
案例练习:测试do while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>do while循环</title>
</head>
<body>
<script>
do{
console.log('你好'); //先执行一次do里的代码,然后再判断条件
}while(1 > 2);
</script>
</body>
</html>
9. break和continue关键字
-
break关键字
- break语句能够结束当前for、for/in、while、do/while或者switch语句的执行。同时break可以接受一个可选的标签名,来决定跳出的结构语句。
- 如果没有设置标签名,则跳出当前最内层结构。
案例练习1:for循环遍历范围是1到10,遍历的时候只想打印到3.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个break的测试文件</title> </head> <body> <script> for ( var i=0 ; i<5 ; i++ ) { if ( i == 3 ) { break; } console.log(i); } </script> </body> </html>
思考:break只能跳出最内层的循环,那么如果有多层的循环,怎么跳出指定哪层或者最外层的for循环?
案例练习2:两层for循环嵌套,每一个都打印0到9,最终打印5,5。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个break的测试文件</title> </head> <body> <script> outermost: for(var i=0; i<10;i++){ for(var j=0; j<10; j++){ if(i==5 && j==5){ break outermost; } } } console.log(i,j); </script> </body> </html>
-
continue关键字
- continue语句用在循环结构内,用于跳出本次循环中剩余的代码,并在表达式的值为真的时候,继续执行下一次循环。
- 可以接受一个可选的标签名,来决定跳出的循环语句。
案例练习1:遍历0到4的过程中,如果遇到3则跳过。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个break的测试文件</title> </head> <body> <script> for ( var i=0 ; i<5 ; i++ ) { if ( i == 3 ) { continue; } console.log(i); } </script> </body> </html>
案例练习2:两层for循环嵌套,每一个都打印0到9,当遇到5,5之后不终止当前循环执行下一次循环。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个break的测试文件</title> </head> <body> <script> outermost: for(var i=0; i<10;i++){ for(var j=0; j<10; j++){ if(i==5 && j==5){ continue outermost; } console.log(i,j); } } </script> </body> </html>
-
break和continue练习
-
求整数1~100的累加值,但要求碰到个位为3的数则停止累加
-
求整数1~100的累加值,但要求跳过所有个位为3的数
-
求1-100之间不能被7整除的整数的和(用continue)
-
求200-300之间所有的奇数的和(用continue)
-
求200-300之间第一个能被7整数的数(break)
-
ATM取钱
输入相应数字,执行相应功能
-
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ATM取钱</title>
</head>
<body>
<script>
var res = prompt('请输入您的操作:1=取钱,2=存钱,3=抢钱,4=退出');
switch (res) {
case '1':
alert('取钱操作。。。');
break;
case '2':
alert('存钱操作。。。');
break;
case '3':
alert('抢钱操作。。。');
break;
case '4':
alert('退出操作。。。');
break;
default:
alert('别瞎按');
}
</script>
</body>
</html>
```
-
收银程序
输入单价和数量,计算总价。如果总价大于500 则打八折。然后用户输入付钱,最终弹出找零。
```html
收银程序
10. 死循环
死循环:在循环中,没有结束条件的循环是死循环,程序中要避免的,否则会造成内存溢出
- 第一种:while(true);
- 第二种:for(;true;);
- 第三种;for(;😉;
11. 扩展知识
-
js中if和switch该如何选择?
if 和 switch 都可以设计多重分支结构,一般情况下 switch 执行效率要高于 if 语句。但是也不能一概而论,应根据具体问题具体分析。简单比较如表所示。
相对而言,下面情况更事宜选用 switch 语句。- 枚举表达式的值。这种枚举是可以期望的、平行的逻辑关系。
- 表达式的值具有离散性,是不具有线性的非连续的区间值。
- 表达式的值是固定的,不会动态变化。
- 表达式的值是有限的,不是无限的,一般应该比较少。
- 表达式的值一般为整数、字符串等简单的值。
下面情况更事宜用 if 语句。
- 具有复杂的逻辑关系。
- 表达式的值具有线性特征,去对连续的区间值进行判断。
- 表达式的值是动态的。
- 测试任意类型的数据。
案例1:根据学生分数进行等级评定:如果分数小于 60,则不及格;如果分数在 60 与 75 之间,则评定为合格;如果分数在75 与 85 之间,则评定为良好;如果分数在 85 与 100 之间,则评定为优秀。
根据上述需求描述,确定检测的分数是一个线性区间值,因此选用 if 语句会更合适。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>优化</title> </head> <body> <script> if (score < 60) { console.log("不及格"); }else if (score < 75) { console.log("合格"); }else if (score <85) { console.log("良好"); }else { console.log("优秀"); } </script> </body> </html>
如果使用 switch 结构,则需要枚举 100 种可能,如果分数值还包括小数,这种情况就更佳复杂了,此时使用 switch 结构就不是明智之举。
案例2 :设计根据性别进行分类管理。这和案例属于有效枚举条件,使用 switch 会更高效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>优化</title> </head> <body> <script> switch (sex) { case 1 : console.log("女士"); break; case 2 : console.log("男士"); break; default : console.log("请选择性别"); } </script> </body> </html>
-
js中for和while如何选择?
for 和 while 语句都可以完成特定动作的重复性操作。
一般来说,在循环结构中,能预先清晰的知道循环次数的,直接用for循环;
会动态改变循环变量的值时,建议使用 while 结构。
简单比较 while 和 for 语句,区别如表所示。
-
js中的while和do while的区别?
while是先判断后执行
do-while 是先执行,后判断,至少执行一次