一、流程控制语句
前提介绍：
- 顺序结构语句 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 是先执行，后判断，至少执行一次
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
