javascript流程控制
javascript流程控制
流程： 代码执行的顺序和方式；
流程控制： 在JS中，用一些特殊的语句控制程序按照我们想要的方式去选择执行（执行一次or重复执行）
一、分类
1、 顺序结构
2、 选择结构
（1）分支结构
- 单路分支
- 双路分支
- 多路分支
- 嵌套分支
（2）条件结构
3、 循环结构
- for循环
- while循环
- do while循环
二、顺序结构
代码的正常的执行顺序：首先按引入的顺序一块一块执行，在每一块中一条一条语句的去执行。
e.g.先执行代码块1，后执行代码块2
{
console.log("代码块1");
}
{
console.log("代码块1");
}
三、选择结构
选择结构：对给定的条件进行判断，再根据判断结果来决定执行哪一段代码。
（一）分支结构
注： if 和 else if 使用布尔表达式或布尔值作为分支条件来进行分支控制
1. 单路分支
条件返回的结果只能是布尔值（其通常是由比较运算符或逻辑运算符组成的表达式所计算的结果值，或返回布尔型的函数等）。若传入其他类型的值，也会自动转换为布尔值。若表达式为true，则执行，否则不执行。
语法结构：
if(表达式){
//当表达式为真时要执行的代码
}
e.g.
2.双路分支
注: else语句是if语句的从句，必须和if一起使用，不能单独存在。
语法结构：
if(表达式){
//表达式为真时执行的代码
} else if {
//表达式为假时执行的代码
}
e.g.
拓展：
prompt：是JS中的一个方法，用来显示提示对话框，返回值是字符串。如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。【注：在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。】
3. 多路分支
注：没有最后一个else也是可以的，当然可能每条路都不满足，也是存在的。
11. 当没有最后一个else时，多路中所有路都为假时，则不执行；
12. 当有最后一个else时，多路中所有路都为假时，则执行最后一个else{……}中的代码。
语法结构：
if(表达式1){
//表达式1为真时执行的代码
}else if (表达式2){
//表达式2为真时执行的代码
}else {
//当表达式1&&表达式2为假时执行的代码
}
e.g.
var grade = prompt("请输入成绩");
if(grade >= 90 && grade <=100){
console.log("成绩优秀");
}else if(grade >=80 && grade <90){
console.log("成绩良好");
}else if(grade >=60 && grade <80){
console.log("成绩合格");
}else if(grade >=0 && grade <60){
console.log("成绩不合格");
}else {
console.log("输入异常");
}
4. 嵌套分支
在一个分支结构中嵌套另一个分支结构。即if语句或else语句后面的代码块中又包含if语句……
var grade = prompt("请输入成绩");
if(grade >= 60 && grade <=100){
console.log("成绩合格");
}else if(grade >=0 && grade <60){
console.log("成绩不合格");
if(grade == 0) {
console.log("成绩为0");
}
}else {
console.log("输入异常");
}
（二）条件结构（switch）
switch语句 switch 语句用于基于不同的条件来执行不同的动作。也就是说，用于测试一个表达时的值，并根据测试结果选择执行相应的分支程序，从而实现分支控制。
switch语句由一个选择表达式和多个case标签组成，case标签后进阶一段代码块。
语法结构:
switch(表达式 n){
case 1:
case "1":
//当 n==1，时执行代码块 1
break;
case 2:
//当 n==1时，执行代码块 2
break;
default:
//当 n 与 case 1 和 case 2 都不同时执行的代码
}
注:
- switch语句的选择表达式的数据类型只能是整型或者是字符串，不能是boolean型，通常这个控制表达式是一个变量名称；
- switch语句后的花括号是必须有的；
- case语句的个数没有规定，可无限增加，但case标签和其后面的值之间应该有一个空格，之后面必须有一个冒号；
- switch语句匹配完成后，将依次逐条执行匹配的分支模块中的语句，知道switch结构结束或遇到break才停止执行，so，请使用 break 来阻止代码自动地向下一个 case 运行。
- default标签后直接跟一个冒号，而后写当所有case值都不匹配时要执行的代码【default语句可省略】
e.g.
var num1 = prompt("请输入数字1");
var num2 = prompt("请输入数字2");
var ysf = prompt("请输入运算符(+，-，*，/)");
console.log(typeof num1);//string
num1 = parseFloat(num1);//parseFloat:解析一个字符串，并返回一个浮点数
num2 = parseFloat(num2);
switch (ysf) {
case "+":
case "加":
console.log(num1+num2);
break;
case "-":
case "减":
console.log(num1-num2);
break;
case "*":
case "乘":
console.log(num1*num2);
break;
case "/":
case "除":
console.log(num1/num2);
break;
default:
console.log("输入异常");
}
拓展:
parseFloat()：此函数可解析一个字符串，并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以number类型返回该数字，而不是string类型。
注：
- 字符串中，只返回第一个数字；
- 开头与结尾的空格是允许的；
- 若字符串的第一个字符不能被转换为数字，则返回NAN。
e.g.
document.write(parseFloat(" 8 2 ")+"
");
document.write(parseFloat("g2 ")+"
");
document.write(parseFloat(" ")+"
");
document.write(parseFloat("2 g")+"
");
document.write(parseFloat("25g")+"
");
document.write(parseFloat("m g")+"
");
document.write(parseFloat("10.33")+"
");
效果图：
三、循环结构
for循环；while循环；do while循环
（一）for循环
主要用来控制循环语句的执行。
适用于明确知道重复执行次数的情况，即for语句将循环次数的变量在for语句中预先定义好。
1. 语法结构：
由分号（；）分割成三部分即：循环变量初始化；条件表达式；循环变量自增/自减；
- 初始化：一个赋值语句，用来循环控制变量赋初值；
- 条件表达式：一个关系表达式，决定什么时候退出循环；
- 循环变量（++/ --）：增量定义循环控制变量，每循环一次后按什么方式变化
2. for语句代码的运行：
- 第一次进入for循环时，对循环控制变量赋初值；
- 根据判断条件的结果决定是否要继续循环，若判断条件为真，则继续执行循环；若为假，则结束循环执行下面的语句。
注：so，步骤1（第一次）赋初值是的运行，不做++/ --的操作，执行完循环体内的语句后，系统会根据循环控制变量增/减方式，更改循环控制变量的值，再回到步骤2重新判断是否继续执行循环。
3. 小练习
- 输出1-100内所有的偶数：
for (var i=0;i<=100;i++){
if(i%2==0){
console.log(i);
}
}
//换一种写法：
for (var i=0;i<=100;i++){
i%2 || console.log(i);
}
- 求1-100累加的和：5050
var sum = 0;
for(var i=1;i<=100;i++){
sum += i;
}
console.log(sum);
- 在页面做出十行十列表格，且偶数行背景色为#ccc
document.write("");
for(var i=1;i<=10;i++){
if(i%2==0){
document.write("");
}else {
document.write(" ");
}
for(var j=0;j<10;j++){
document.write(`第${i}行 第${j+1}列 `);
}
document.write(" ");
}
document.write("
");
效果图:
拓展：
document.write()：
- 常用来网页向文档中输出内容；
- 其次，也可以通过此方法输出变量和字符串的结合，通过变量拼接字符串来达到我们想输出的效果；
e.g.
var str = 'hello world';
document.write(str + " " + "嗨，你好");
效果图：
- 最后，还可以通过此方法来输出html标签，同时也可以将css样式写入标签中，注意书写格式，及引号之间的转义。
e.g.
document.write("我爱学习 http://www.woaixuexi.com
")
效果图：
document.write("");
for(var i=1;i<10;i++){
document.write("- 123
");
document.write("- ");
document.write(i);
document.write("
");
document.write("- "+i+"
");
document.write("- "+(i+1)+"
");
document.write(`- ${i}
`); //ES6新增，模板字符串
document.write(`- ${i+1}
`); //ES6新增，模板字符串
}
document.write("
");
拓展：
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。【注：如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。】
（二）while循环
设定一个布尔型条件，当条件为真时，不断执行一个语句块，直到条件为假。
1. 语法结构：
while (表达式){
//当表达式为真时执行的代码
}
2. while循环实际的运行：
- 计算表达式的值，判断其true/false；
- 为false，while将结束，执行while之后的语句；
- 为true，执行while语句花括号中的代码块，然后返回第一条执行。
e.g.
//用if条件语句：
var grade = prompt("请输入成绩");
if(!(grade >= 0 && grade <= 100)){
grade = prompt("请输入成绩");//只执行了一次，若第二次输入依旧为假值，就输入不了了
}
//使用while循环语句：
var grade;
while (!(grade >=0 && grade <=100)){
grade = prompt("请输入成绩");//循环执行，直至输入真值
}
（三） do while循环
do while循环与while循环非常相似，区别在于do while循环表达式的值是在每一次循环结束后检查，so，do while循环语句必定会执行一次。
1. 语法结构：
do{
/*当表达式为真时，要执行的代码*/
} while(/*表达式*/)
2. do while循环实际的运行：
- 先执行一遍do {……}花括号中的代码块；
- 然后计算表达式的值，判断其true/false；
- 为false，循环将结束，执行do while之后的语句；
- 为true，返回执行do{……}花括号中的代码块。
e.g.
var grade;
do {
grade = prompt("请输入成绩");
}while (!(grade >=0 && grade <=100))
（四）循环的控制语句
1.break语句：
停止循环，而后不继续，用于跳出循环。
可以将深埋在嵌套循环中的语句退出到指定层数，break是接受一个可选的数字参数决定跳出几重（层）语句。
e.g. 鸡兔同笼，36个头，98只脚，求鸡、兔个数。
设：鸡为i，兔为j
loop1: //loop1给这个循环的命名
for(var i=0;i<=36;i++){
for(var j=36-i;j<=36;j++){
if(i*2+j*4==98){
console.log(`鸡的个数是${i}只，兔的个数是${j}只`);
break loop1; //在这个位置，停止loop1循环的继续
}
}
}
2.continue语句：
停止循环，停止当前条件下的循环，而后继续。用于跳过循环中的一个迭代。
注：只能使用在循环语句内部，功能是跳出该次循环，继续执行下一次循环结构。【对于while和do while语句，continue跳转到循环条件开始出执行；对于for循环，控制变量更新，然后继续执行代码块。】
e.g.
for (var i=0;i<=10;i++) {
if (i==3) continue; //跳过了值 3
console.log(i); //0 1 2 4 5 6 7 8 9 10
}