JavaScript 04 流程控制（循环）

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

1.2 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

1.3 分支流程控制

分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS 语言提供了两种分支结构语句：if 语句、switch 语句

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

if else语句（双分支语句）
- ·语法结构
  
  // 条件成立执行 if 里面代码，否则执行else 里面的代码
  if (条件表达式) {
  // [如果] 条件成立执行的代码
  } else {
  // [否则] 执行的代码
  }
- 执行流程

if else if 语句(多分支语句)
语法结构

// 适合于检查多重条件。
if (条件表达式1) {
语句1；
} else if (条件表达式2) {
语句2；
} else if (条件表达式3) {
语句3；
....
} else {
// 上述条件都不成立执行此处代码
}
执行逻辑

1.4 三元表达式

语法结构
```
 表达式1 ? 表达式2 : 表达式3;
```
执行思路
- 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
- 简单理解：就类似于 if else （双分支）的简写

1.5 switch分支流程控制

语法结构
```
 switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。
```
```
 switch( 表达式 ){ 
     case value1:
         // 表达式 等于 value1 时要执行的代码
         break;
     case value2:
         // 表达式 等于 value2 时要执行的代码
         break;
     default:
         // 表达式 不等于任何一个 value 时要执行的代码
 }
```
- switch ：开关转换， case ：小例子选项
- 关键字 switch 后面括号内可以是表达式或值，通常是一个变量
- 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
- switch 表达式的值会与结构中的 case 的值做比较
- 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
- 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
  
  注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
switch 语句和 if else if 语句的区别
- 一般情况下，它们两个语句可以相互替换
- switch...case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
- 当分支比较少时，if… else语句的执行效率比 switch语句高。
- 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

附上流程控制思维导图：

2 - 循环

1.1 for循环

语法结构

 for(初始化变量; 条件表达式; 操作表达式 ){
     //循环体
 }

名称	作用
初始化变量	通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

执行过程：

初始化变量，初始化操作在整个 for 循环只会执行一次。

执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。

执行操作表达式，此时第一轮结束。
第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
继续执行操作表达式，第二轮结束。
后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

断点调试：

     断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程

 断点调试的流程：
 1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
 2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
 3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

for 循环重复相同的代码

比如输出10句“媳妇我错了”

 //  基本写法
 for(var i = 1; i <= 10; i++){
     console.log('媳妇我错了~');
 }
 // 用户输入次数
 var num = prompt('请输入次数:')；
 for ( var i = 1 ; i <= num; i++) {
     console.log('媳妇我错了~');
 }

for 循环重复不相同的代码

例如，求输出1到100岁：

 //  基本写法
 for (var i = 1; i <= 100; i++) {
       console.log('这个人今年' + i + '岁了');
 }

例如，求输出1到100岁，并提示出生、死亡

 // for 里面是可以添加其他语句的 
 for (var i = 1; i <= 100; i++) {
  if (i == 1) {
     console.log('这个人今年1岁了， 它出生了');
  } else if (i == 100) {
     console.log('这个人今年100岁了，它死了');
   } else {
        console.log('这个人今年' + i + '岁了');
   }
 }

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

1.2 双重for循环

双重 for 循环概述

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

双重 for 循环语法

 for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
     for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
        需执行的代码;
    }
 }

内层循环可以看做外层循环的循环体语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

打印五行五列星星

 var star = '';
 for (var j = 1; j <= 3; j++) {
     for (var i = 1; i <= 3; i++) {
       star += '☆'
     }
     // 每次满 5个星星 就 加一次换行
     star += '\n'
 }
 console.log(star);

核心逻辑：

1.内层循环负责一行打印五个星星

2.外层循环负责打印五行

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

1.3 while循环

while语句的语法结构如下：

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

执行思路：

1 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
2 执行循环体代码
3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

注意：

使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环

1.4 do-while循环

do... while 语句的语法结构如下：

 do {
     // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
 } while(条件表达式);

执行思路

1 先执行一次循环体代码
2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

1.5 continue、break

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

  for (var i = 1; i <= 5; i++) {
      if (i == 3) {
          console.log('这个包子有虫子，扔掉');
          continue; // 跳出本次循环，跳出的是第3次循环 
       }
       console.log('我正在吃第' + i + '个包子呢');
  }

运行结果：

break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

 for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 直接退出整个for 循环，跳到整个for下面的语句
    }
    console.log('我正在吃第' + i + '个包子呢');
  }

运行结果：

附上循环结构思维导图:

2 - 代码规范

2.1 标识符命名规范

变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词

2.2 操作符规范

 // 操作符的左右两侧各保留一个空格
 for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 直接退出整个 for 循环，跳到整个for循环下面的语句
    }
    console.log('我正在吃第' + i + '个包子呢');
 }

2.3 单行注释规范

 for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 单行注释前面注意有个空格
    }
    console.log('我正在吃第' + i + '个包子呢');
 }

2.4 其他规范

 关键词、操作符之间后加空格

附上循环练习题（有兴趣的可以做一下）：

【程序 1】题目：古典问题：有一对兔子，从出生后第 3 个月起每个月都生一对兔子，
小兔子长到第三个月后每个月又生一对兔子，假如兔子都不死，问每个月的兔子总数为多少？

1、1、2、3、5、8、13、21、34
//n：月份;n>=1
//n = 1 ;f(1) = 1 ;
//n=2 ;f(2)=1;
//n>2;f(n) = f(n-1) + f(n-2);

【程序 2】题目：判断 101-200 之间有多少个素数(质数)，并输出所有素数。
1.程序分析：判断素数的方法：用一个数分别去除 2 到 sqrt(这个数)，如果能被整除，则表明此数不是素数，反之是素数。

【程序 3】题目：打印出所有的"水仙花数"，所谓"水仙花数"是指一个三位数，
其各位数字立方和等于该数本身。例如：153 是一个"水仙花数"，
因为 153=1 的三次方＋5 的三次方＋3 的三次方。 1.程序分析：利用 for 循环控制 100-999 个数，每个数分解出个位，十位，百位。

【程序 4】题目：将一个正整数分解质因数。例如：输入 90,打印出 90=2*3*3* 5。
程序分析：对 n 进行分解质因数，应先找到一个最小的质数 k，

然后按下述步骤完成： (1)如果这个质数恰等于 n，则说明分解质因数的过程已经结束，打印出即可。

(2)如果 n>k，但 n 能被 k 整除，则应打印出 k 的值，并用 n 除以 k 的商,作为新的正整数你 n,重复执行第一步。
(3)如果 n 不能被 k 整除，则用 k+ 1 作为 k 的值,重复执行第一步。

【程序 5】题目：利用条件运算符的嵌套来完成此题：学习成绩>=90 分的同学用 A 表示，
60-89 分之间的用 B 表示， 60 分以下的用 C 表示。

【程序 6】题目：输入两个正整数 m 和 n，求其最大公约数和最小公倍数。
1. 程序分析：利用辗除法。

// ......

【程序 7】题目：输入一行字符，分别统计出其中英文字母、空格、数字和其它字符的个数。
1.程序分析：利用 while 语句,条件为输入的字符不为 '\n '。

【程序 8】题目：求 s=a+aa+aaa+aaaa+aa...a 的值，其中 a 是一个数字。
例如 2+22+222+2222+22222(此时共有 5 个数相加)，几个数相加有键盘控制。
1. 程序分析：关键是计算出每一项的值。

【程序 9】题目：一个数如果恰好等于它的因子之和，这个数就称为 "完数 "。
例如 6=1＋2＋3.编程找出 1000 以内的所有完数。

【程序 10】题目：一球从 100 米高度自由落下，每次落地后反跳回原高度的一半；
再落下，求它在第 10 次落地时，共经过多少米？
第 10 次反弹多高？

【程序 11】题目：有 1、2、3、4 个数字，能组成多少个互不相同且无重复数字的三位数？都是多少？ 4*3*2 = 24
1.程序分析：可填在百位、十位、个位的数字都是 1、 2、3、4。组成所有的排列后再去掉不满足条件的排列。

【程序 12】题目：企业发放的奖金根据利润提成。利润(I)低于或等于 10 万元时，奖金可提 10%；
利润高于 10 万元，低于 20 万元时，低于 10 万元的部分按 10%提成，高于 10 万元的部分，可可提成 7.5%；
20 万到 40 万之间时，高于 2 0 万元的部分，可提成 5%；
40 万到 60 万之间时高于 40 万元的部分，可提成 3%；
60 万到 100 万之间时，高于 60 万元的部分，可提成 1.5%，高于 100 万元时，超过 100 万元的部分按 1%提成，
从键盘输入当月利润 I，求应发放奖金总数？
1.程序分析：请利用数轴来分界，定位。注意定义时需把奖金定义成长整型。

【程序 13】题目：一个整数，它加上 100 后是一个完全平方数，再加上 168 又是一个完全平方数，请问该数是多少？
1.程序分析：在 10 万以内判断，先将该数加上 100 后再开方，再将该数加上 168 后再开方，如果开方后的结果满足
如下条件，即是结果。请看具体分析：穷举法。

【程序 14】题目：输入某年某月某日，判断这一天是这一年的第几天？
1.程序分析：以 3 月 5 日为例，应该先把前两个月的加起来，然后再加上 5 天即本年的第几天，特殊情况，
闰年且输入月份大于 3 时需考虑多加一天。

【程序 15】题目：输入三个整数 x,y,z，请把这三个数由小到大输出。
1.程序分析：我们想办法把最小的数放到 x 上，先将 x 与 y 进行比较，如果 x> y 则将 x 与 y 的值进行交换，然后再用 x 与 z 进行比较，如果 x> z 则将 x 与 z 的值进行交换，这样能使 x 最小。

【程序 16】题目：输出 9*9 口诀。 1.程序分析：分行与列考虑，共 9 行 9 列， i 控制行，j 控制列。

【程序 17】题目：猴子吃桃问题：猴子第一天摘下若干个桃子，当即吃了一半，还不瘾，又多吃了一个
第二天早上又将剩下的桃子吃掉一半，又多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。
到第 10 天早上想再吃时，见只剩下一个桃子了。求第一天共摘了多少。
10 1
9 4 （1+1）*2 = 4
8 10 (4+1)*2 = 10
7 22 (10+1)*2 = 22

假设 x
x - x/2 - 1 = 1 ; x = (1+1)*2 = 4

1.程序分析：采取逆向思维的方法，从后往前推断。

【程序 18】题目：两个乒乓球队进行比赛，各出三人。甲队为 a,b,c 三人，乙队为 x,y,z 三人。已抽签决定比赛名单。有人向队员打听比赛的名单。a 说他不和 x 比，c 说他不和 x,z 比，请编程序找出三队赛手的名单。 1.程序分析：判断素数的方法：用一个数分别去除 2 到 sqrt(这个数)，如果能被整除，则表明此数不是素数，反之是素数。

【程序 19】题目：打印出如下图案（菱形） * *** ****** ******** ****** *** * 1.程序分析：先把图形分成两部分来看待，前四行一个规律，后三行一个规律，利用双重 for 循环，第一层控制行，第二层控制列。

【程序 20】题目：有一分数序列：2/1，3/2，5/3，8/5，13/8，21/13...求出这个数列的前 20 项之和。 1.程序分析：请抓住分子与分母的变化规律。

【程序 21】题目：求 1+2!+3!+...+20!的和 1.程序分析：此程序只是把累加变成了累乘。

【程序 22】题目：利用递归方法求 5!。 1.程序分析：递归公式：fn=fn_1*4!

【程序 23】题目：有 5 个人坐在一起，问第五个人多少岁？他说比第 4 个人大 2 岁。问第 4 个人岁数，他说比第 3 个人大 2 岁。问第三个人，又说比第 2 人大两岁。问第 2 个人，说比第一个人大两岁。最后问第一个人，他说是 10 岁。请问第五个人多大？ 1.程序分析：利用递归的方法，递归分为回推和递推两个阶段。要想知道第五个人岁数，需知道第四人的岁数，依次类推，推到第一人（1 0 岁），再往回推。

【程序 24】题目：给一个不多于 5 位的正整数，要求：一、求它是几位数，二、逆序打印出各位数字。

【程序 25】题目：一个 5 位数，判断它是不是回文数。即 12321 是回文数，个位与万位相同，十位与千位相同。

【程序 26】题目：请输入星期几的第一个字母来判断一下是星期几，如果第一个字母一样，则继续判断第二个字母。 1.程序分析：用情况语句比较好，如果第一个字母一样，则判断用情况语句或 if 语句判断第二个字母。

【程序 27】题目：求 100 之内的素数

【程序 28】题目：对 10 个数进行排序 1.程序分析：可以利用选择法，即从后 9 个比较过程中，选择一个最小的与第一个元素交换，下次类推，即用第二个元素与后 8 个进行比较，并进行交换。

【程序 29】题目：求一个 3*3 矩阵对角线元素之和 1.程序分析：利用双重 for 循环控制输入二维数组，再将 a[i][i]累加后输出。

【程序 30】题目：有一个已经排好序的数组。现输入一个数，要求按原来的规律将它插入数组中。 1. 程序分析：首先判断此数是否大于最后一个数，然后再考虑插入中间的数的情况，插入后此元素之后的数，依次后移一个位置。

【程序 31】题目：将一个数组逆序输出。 1.程序分析：用第一个与最后一个交换。

【程序 32】题目：取一个整数 a 从右端开始的 4～7 位。程序分析：可以这样考虑： (1)先使 a 右移 4 位。 (2)设置一个低 4 位全为 1,其余全为 0 的数。可用 ~(~0 < <4) (3)将上面二者进行&运算。

【程序 33】题目：打印出杨辉三角形（要求打印出 10 行如下图） 1.程序分析： 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 【程序 34】题目：输入 3 个数 a,b,c，按大小顺序输出。 1.程序分析：利用指针方法。

【程序 35】题目：输入数组，最大的与第一个元素交换，最小的与最后一个元素交换，输出数组。

【程序 36】题目：有 n 个整数，使其前面各数顺序向后移 m 个位置，最后 m 个数变成最前面的 m 个数

【程序 37】题目：有 n 个人围成一圈，顺序排号。从第一个人开始报数（从 1 到 3 报数），凡报到 3 的人退出圈子，问最后留下的是原来第几号的那位。

【程序 38】题目：写一个函数，求一个字符串的长度，在 main 函数中输入字符串，并输出其长度。

【程序 39】题目：编写一个函数，输入 n 为偶数时，调用函数求 1/2+1/4+...+ 1/n,当输入 n 为奇数时，调用函数 1/1+1/3+...+1/n(利用指针函数)

【程序 40】题目：字符串排序。

【程序 41】题目：海滩上有一堆桃子，五只猴子来分。第一只猴子把这堆桃子凭据分为五份，多了一个，这只猴子把多的一个扔入海中，拿走了一份。第二只猴子把剩下的桃子又平均分成五份，又多了一个，它同样把多的一个扔入海中，拿走了一份，第三、第四、第五只猴子都是这样做的，问海滩上原来最少有多少个桃子？

【程序 42】题目：809*??=800*??+9*??+1 其中??代表的两位数,8*??的结果为两位数，9*??的结果为 3 位数。求??代表的两位数，及 809*??后的结果。

【程序 43】题目：求 0—7 所能组成的奇数个数。

【程序 44】题目：一个偶数总能表示为两个素数之和。

【程序 45】题目：判断一个素数能被几个 9 整除。

【程序 46】题目：两个字符串连接程序

【程序 47】题目：读取 7 个数（1—50）的整数值，每读取一个值，程序打印出该值个数的＊。

【程序 48】题目：某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上 5,然后用和除以 10 的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换。

【程序 49】题目：计算字符串中子串出现的次数

【程序 50】题目：有五个学生，每个学生有 3 门课的成绩，从键盘输入以上数据（包括学生号，姓名，三门课成绩），计算出平均成绩，况原有的数据和计算出的平均分数存放在磁盘文件 "stud "中。

笔记内容来源于哔哩哔哩pink老师javascript教程，思维导图是自己整理的，

练习题答案网上可以找到

期望看完的朋友可以点个赞，谢谢。