JS——2（选择、循环）

JS流程控制——分支

1. 流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解：流程控制就是用来控制我们的代码按照什么结构顺序来执行；
流程控制主要有三种结构：顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

2. 顺序流程控制

顺序结构是程序中最简单的、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行。
程序执行流程图如下：

3. 分支流程控制 if 语句

3.1 分支结构

从上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。
分类：if 语句 switch 语句
程序执行流程图如下：

3.2 if 语句

1. 基本语法
   //条件成立执行代码，否则什么也不做
   … if (条件表达式) {
//条件成立执行的代码语句
   … }
   语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多语句个语句组成，一般情况下，会分割成一个一个的语句。

2. 代码运行的流程图
   

3. 举例子：

<script>
	if (3 < 5) {
       //条件成立执行的代码语句
       alert('沙漠骆驼');
     }
</script>

3.3 if else 语句（双分支语句）

1. 语法结构
   // 条件成立，执行 if 里面代码，否则执行 else 里面的代码
if (条件表达式) {
   … //[如果]条件成立执行的代码
} else {
   … //[否则]执行的代码
}

2. 代码运行的流程图
   

3. 举例子

<script>
	var age = prompt('请输入您的年龄：');
    // 条件成立，执行 if 里面代码，否则执行 else 里面的代码
    if (age >= 18) {
    	//[如果]条件成立执行的代码
       alert('我想带你去网吧');
    } else {
        //[否则]执行的代码
        alert('滚，回家去做作业');
    }
</script>

3.4 多分支语句（多选一）

1. 语法规范
   if(条件表达式1){
   …//语句1；
} else if (条件语句2) {
   …//语句3；
} else {
   …//最后的语句；
}

执行思路

如果条件表达式1满足就执行语句1；执行完毕后，退出整个 if 分支语句；
如果条件表达式1不满足，则判断条件表达式2；
如果上面的所有条件表达式都不成立，则执行 else 里面的语句；

注意点：

• 多分支语句还是多选一，最后只能有一个语句执行
• else if 里面的条件理论上是可以任意多个的；
• else if 中间有个空格

2. 代码运行的流程图
   

3. 例子

 <script>
 	var age = prompt('请输入您的年龄：');
    if (age <= 12) {
        alert('你还是个小孩子哦');
     }else if (age > 12 && age <=18) {
        alert("你已经是个少年郎了");
     } else {
        alert('你是成年人啦！');
     }
</script>

4. 三元表达式

三元表达式也能做一些简单的条件选择。有三元运算符组成的式子成为三元表达式；

三元表达式复习：

1. 语法：text ? expression1 : expression2
2. text：任何 Boolean 表达式；
3. expression1：如果 test 为 true，则返回表达式。可能是逗号表达式；
4. expression2：如果 test 为 false，则返回表达式。可以使用逗号表达式链接多个表达式；

<script>
    var num = 10;
    var result = num > 5 ? '是的' : '不是的';
    console.log(result);
</script>

5. 分支流程控制 switch 语句

5.1 语法结构

• switch 语句也是分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch
• switch 语句也是多分支语句，也可以实现多选1
• 语法结构：switch 开关、转换 case 小例子或者选项的意思；
• 执行思路：利用我们的表达式的值和case后面的选项值相匹配，如果匹配上，就执行 case

<script>
	switch (表达式) {
       case value1:
           执行语句1;
           break;
       case value2:
           执行语句2;
           break;
       ...
       default:
           执行最后的语句；
           break;
    }
</script>

注意：

• 我们开发里面表达式我们经常写成变量；
• 我们 num 的值和 case 里面的值相匹配的时候是全等，必须是值和数据类型一直才可以
• break 如果当前的 case 里面没有 break，则不会退出 switch 是继续执行下一个 case

5.2 switch 语句和 if else if 语句的区别

1. 一般情况下，它们两个语句可以相互替换；
2. switch-case 语句通常处理 case 为比较确定值的情况，而 if-else 语句更加灵活，常用于范围判断（大于、等于某个范围）
3. switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而 if-else 语句有几种条件，就得判断多少次。
4. 当分支比较少时，if-else 语句的执行效率比 switch 语句高；
5. 当分支比较多时，switch 语句的执行效率比较高，而且结构更清晰；

JS流程控制——循环

1. 循环

1.1 循环的目的

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。

1.2 JS 中的循环

• for 循环
• while 循环
• do-while 循环

2. for循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

2.1语法结构

for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

1. for 重复执行某些代码，通常跟计数有关系；
2. for 语法结构
3. 初始化变量：就是用 var 声明的一个普通变量，通常用于作为计数器使用；
4. 条件表达式：就是用来决定每一次循环是否继续执行，就是终止的条件；
5. 操作表达式：是每次循环最后执行的代码，经常用于我们计数器变量进行更新（递增或者递减）

<script>
	for (var i = 1; i<=100; i++) {
        console.log('你好');
    }
</script>

• 首先执行里面计数器变量 var i = 1。但是这句话在 for 里面只执行一次 index
• 去 i <= 100 来判断是否满足条件，如果满足条件就执行一次循环体，不满足就退出循环体；
• 最后去执行 i++ ，i++是单独写的代码，递增，第一轮结束；
• 接着去执行 i <= 100，如果满足条件就去执行循环体，不满足就退出循环，这是第二轮；

2.2断点调试

2.3 for 循环重复不相同的代码

for 循环还可以重复不同的代码，这主要是因为使用了计算器，计数器在每次循环过程中都会有变化

<script>
        for (var i = 1; i <= 100; i++) {
                if (i == 1) {
                    console.log('这个人今年1岁啦，他出生了');
                } else if (i == 100) {
                    console.log('这个人今年100岁啦，他死了');
                } else {
                    console.log('这个人今年' + i + '岁了');
                }
            }
    </script>

2.4 for 循环重复某些相同的操作

for 循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算；

<script>
   //for 循环重复执行某些操作
   //求 1~100 之间的整数累加和
   //      需要循环100次，我们需要一个计数器
   // 我们需要一个存储结果的变量 sum ,但是初始值一定是 0 
   // 核心算法：1+2+3+4+...+sum = sum +i;
   var sum = 0;//求和 的变量
   for(var i = 1;i <= 100; i++){
      //sum = sum + i;
      sum += i;
   }
        console.log(sum);
</script>

3. 双重for循环

3.1 双重 for 循环概述

很多情况下，单层 for 循环并不能满足需求。
循环嵌套是指一个循环语句中再定义一个循环语句的语法结构，例如 for 循环语句中，可以再嵌套一个 for 循环，这样的 for 循环语句我们称之为双重 for 循环。

语法结构：

<script>
        var str = '';
        for (var i = 1; i <= 5; i++){
            for(var j = i; j <= 5; j++){
                str = str + '⭐';
            }
            str += '\n';
        }
        console.log(str);
    </script>

3.2 for 循环小结

• for 循环可以重复执行某些相同代码；
• for 循环可以重复执行些许不同的代码，因为我们有计数器；
• for 循环可以重复执行某些操作，比如算术运算符加法操作；
• 随着需求增加，双重 for 循环可以做更多、更好看的效果；
• 双重 for 循环，外层循环一次，内层 for 循环全部执行；
• for 循环是循环条件和数字直接相关的循环；
• 分析要比写代码更重要；

4. while 循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环，
语法结构如下：

whille (条件表达式) {
…//循环体代码
}

执行思路：

1. 先执行条件表达式，如果结果为true，则执行循环体代码；如果为 false ，则退出循环，执行后面代码；
2. 执行循环代码
3. 循环体代码执行完毕后，程序会继续执行条件表达式，如条件仍为 true，则会继续执行循环体，知道循环条件为 false 时，整个循环过程才会结束。
4. 里面应该也有计数器，初始化变量
5. 里面应该也有操作表达式，完成计数器的更新，防止死循环

<script>
	var num = 1;
	while (num <= 100) {
		console.log('hello');
 		num++;
	}
</script>

5. do-while 循环

do-while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

1. 语法结构
   do {
   … //循环体代码 - 条件表达式为 true 时重复执行循环体代码
   … } while (条件表达式);
2. 执行思路：跟while 不同的地方在于 do-while 先执行一次循环体，先判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环；
3. 先执行循环体，再判断，do-while 循环体至少执行一次；

循环小结

• JS 循环有 for、while、do-while；
• 三个循环很多情况下都可以相互替代使用；
• 如果是用来记次数，跟数字相关的，三者使用基本相同，更倾向于用 for ；
• while 和 di-while 可以做更复杂的动作，比 for 更灵活一些；
• while 和 do-while 执行顺序不一样，while 先判断后执行，do-while 先执行一次，再判断执行；
• while 和 do-while 执行次数不一样，do-while 至少会执行一次循环体，而 while 可能一次也不执行；
• 实际工作中，我们更常用 for 循环语句，它写法更简洁直观。

6. continue break

6.1 continue

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
例如，吃5个包子，第三个有虫子，就扔掉第三个，继续吃第四第五个包子

<script>
	var sum = 0;
	for (var i = 1; i <= 100; i++) {
		if (i % 7 == 0) {
			continue;
		}
		sum += i;
	}
	console.log(sum);
</script>

6.2 break

break 关键字用于立即跳出整个循环（循环结束）；
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了

<script>
	//break  退出整个循环
	for (var i = 1; i <= 5; i++) {
	if (i == 3) {
		break;
	}
	console.log('我正在吃第' + i + '个包子');
	}
</script>

7. 循环例子

1. 打印九九乘法表

 <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>