在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构、循环结构，这是三中结构代表三种代码执行的顺序
（一）、顺序流程控制
顺序结构是程序中最简单的、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的.
代码块：
我们的程序是由一条条语句构成的，语句是按照从上到下的顺序一条条执行的，在js中，可以使用{}来为语句进行分组， 同一个{}中的语句，我们称为一组语句，他们要么都执行，要么都不执行一个{}中的语句，我们也称为一个代码块
在代码块的后边，就不用编写;号了， js中的代码块，只具有分组的作用，没有其他的用途，代码块内容的内容，在外部是完全可见的
<script>
{
alert("hello");
console.log("你好");
var num = 100;
}
console.log(num);
</script>
（二）、分支流程控制
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
1、if分支语句
条件判断语句
-使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立，则语句不执行
（1）、 if语句
语法结构：
if(条件表达式){执行语句....};
执行思路：
if语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为true，则执行if后的语句； 如果条件表达式的值为false，则不会执行if后的语句；
注意：
if语句只能控制紧随其后的那个语句，如果希望if语句可以控制多条语句，可以将这些语句统一放在代码块中。
如果就一条if语句，代码块不是必须的，但在开发中尽量写清楚
代码验证：弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进网吧
<script>
if (true) console.log("好好学习，天天向上");
// 加上条件运算符 && ||
var a = 20;
if (a > 10 && a <= 20) {
console.log("a在10-20之间");
console.log("4567");
}
// 弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进网吧
var age = prompt("请输入年龄");
if (age >= 18) {
alert("欢迎光临");
}
</script>
（2）、 if....else...语句
语法结构
if（条件表达式）{
执行语句1....
}else{
执行语句2....
}
执行思路
当该语句执行时，会先对if后的条件进行判断，如果该值为true，则执行if后的语句，如果该值为false，则执行else后的语句，两者选其一执行
代码验证：弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进网吧，否则，让回家好好学习
<script>
var age = prompt("请输入年龄");
if (age >= 18) {
alert("你已经" + age + "岁，欢迎光临");
} else {
alert("你才" + age + "岁，回家学习吧");
}
</script>
课堂小练习：
1、接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年
常识点：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）
或者能被400整除的就是闰年
var year=prompt('请输入年份');
if(year%4==0&&year%100!==0||year%400==0){
alert('今年是闰年')
}else{
alert('今年是平年')
}
（3）、if...else if...else语句（多分支语句）
语法结构：
if(条件表达式){
执行语句....
}else if(条件表达式){
执行语句....
}else{
上述都不成立，执行语句
}
执行思路：
当该语句执行时，会从上到下依次对条件表达式进行求值，如果值为true，则执行当前语句；如果值为false，则继续向下判断； 如果所有的条件都不满意，就执行最后一个else或者不执行，该语句中，只会有一个代码块被执行，一旦代码块执行了， 则直接结束语句 ；else if 理论上是可以有多个的
<script>
var age = prompt("请输入年龄");
if (age < 18) {
alert("你还未成年");
} else if (age >= 18 && age <= 60) {
alert("你需要努力工作，养家活口");
} else {
alert("你可以颐养天年了");
}
</script>
课堂小练习：根据用户输入的分数，有不同的奖励
1：90分以上，奖励宝马
2:80-90分，奖励100元
3:70-80分，奖励书包
4:60-70分，奖励练习册
5:60分以下，奖励棍棒炒肉丝
// 使用 prompt 函数弹出一个输入框，提示用户输入分数
// prompt 函数会返回用户输入的内容，这里将其赋值给变量 scoreInput
let scoreInput = prompt("请输入你的分数：");
// 因为 prompt 返回的是字符串类型，所以需要使用 parseFloat 函数将其转换为浮点数
// 转换后的结果存储在变量 score 中
let score = parseFloat(scoreInput);
// 首先检查输入是否为有效的数字
// isNaN 函数用于判断一个值是否为非数字，如果 score 是 NaN（非数字），说明输入无效
if (isNaN(score)) {
// 当输入无效时，使用 alert 函数弹出提示框告知用户输入无效
alert("输入无效，请输入一个有效的数字分数。");
} else {
// 定义一个变量 reward 用于存储最终的奖励信息
let reward;
// 使用 if - else if - else 语句根据不同的分数范围来确定奖励
if (score > 90) {
// 当分数大于 90 时，将奖励设置为 "宝马"
reward = "宝马";
} else if (score >= 80 && score <= 90) {
// 当分数在 80 到 90 之间（包含 80 和 90）时，将奖励设置为 "100 元"
reward = "100 元";
} else if (score >= 70 && score < 80) {
// 当分数在 70 到 80 之间（包含 70 但不包含 80）时，将奖励设置为 "书包"
reward = "书包";
} else if (score >= 60 && score < 70) {
// 当分数在 60 到 70 之间（包含 60 但不包含 70）时，将奖励设置为 "练习册"
reward = "练习册";
} else {
// 当分数小于 60 时，将奖励设置为 "棍棒炒肉丝"
reward = "棍棒炒肉丝";
}
// 使用 alert 函数弹出提示框，告知用户根据其输入的分数所获得的奖励
alert("你的分数对应的奖励是：" + reward);
}
2、三元表达式
有三元运算符组成的式子，我们成为三元表达式
语法结构：条件表达式？表达式1:表达式2
执行思路：如果条件表达式为真，返回表达式1的值，如果条件表达式为假，返回表达式2的值
代码验证：
如果年龄达到了18岁，则显示成年了，否则返回未成年
<script>
var age3 = prompt("请输入年龄");
age3 >= 18 ? alert("欢迎光临") : alert("回家学习吧");
</script>
课堂小练习：用户输入数字，如果数字小于10，则在前面补0，比如01，如果数字大于10，则不需要补，如20
<script>
var num = prompt("请输入数字");
// if实现
// if (num > 0 && num < 10) {
// num = "0" + num;
// }
// 三元表达式实现
num = num > 0 && num < 10 ? "0" + num : num;
alert(num);
</script>
3、switch分支语句（ switch...case...语句）
switch语句也是多分支语句，它用于基于不同条件来执行不同的代码，当要针对变量设置一系列的特定值的选项时，就可以用switch语句；
switch转换，开关的意思；case 选项的意思； break退出语句
语法结构：
switch(条件表达式){
case 表达式:
执行语句....；
break;
case 表达式:
执行语句....
break;
······
default:
执行语句...；
}
执行流程：
在执行时，会依次将case后的表达式的值和switch后的条件表达式的值，进行全等比较，如果比较结果为true，则从当前case处开始执行代码，当前case后的所有代码都会执行，我们可以在case的后边跟着一个break关键字，这样可以确保只会执行当前case后的语句，而不会执行其他的case， 如果比较结果为false，则继续向下比较匹配，如果所有的比较结果都为false，则只执行default后的语句
区别：
switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，一般情况下，两者是可以互相替换的
switch···case语句通常处理case为比较确定值得情况下，而if···else···语句更加灵活，常用于范围判断
switch语句进行条件判断后直接执行到程序的条件语句，效率更高，而if···else语句有几种条件，有几种条件就得判断多少次
当分支比较少的时，if···else语句的执行效率比switch语句
<script>
var num = 2;
switch (num) {
case 1:
console.log("壹");
//使用break可以退出switch语句
break;
case 2:
console.log("贰");
break;
case 3:
console.log("叁");
break;
default:
console.log("非法数字～～～");
break;
}
</script>
课堂小练习：
用户输入水果，跟case里的值进行匹配，弹出对应的信息，如果没有对应的信息，弹出没有此水果。
// 使用 prompt 函数弹出一个输入框，提示用户输入水果名称
// 用户输入的内容会作为字符串返回，并存储在变量 fruit 中
let fruit = prompt("请输入一种水果名称：");
// 使用 switch 语句根据用户输入的水果名称进行匹配
switch (fruit) {
// 如果用户输入的水果是 "苹果"
case "苹果":
// 弹出提示框，显示苹果相关的信息
alert("苹果富含维生素 C，口感清甜。");
// 使用 break 语句跳出 switch 语句，防止继续执行后续的 case
break;
// 如果用户输入的水果是 "香蕉"
case "香蕉":
// 弹出提示框，显示香蕉相关的信息
alert("香蕉富含钾元素，有助于补充能量。");
break;
// 如果用户输入的水果是 "橙子"
case "橙子":
// 弹出提示框，显示橙子相关的信息
alert("橙子含有丰富的维生素 C，酸甜可口。");
break;
// 如果用户输入的水果是 "葡萄"
case "葡萄":
// 弹出提示框，显示葡萄相关的信息
alert("葡萄有多种颜色，口感多汁。");
break;
// 如果用户输入的水果在上述 case 中都没有匹配到
default:
// 弹出提示框，告知用户没有此水果的相关信息
alert("没有此水果。");
}
（三）、循环语句
在实际问题中，有很多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句
1、for循环
在程序中，一组被重复执行的语句被成为循环体，能否继续重复执行，取决于循环的终止条件，由循环体及循环终止条件组成的语句，我们称之为循环语句
for循环，重复执行某些代码，通常跟计数有关系
语法结构：
在for循环中，为我们提供了专门的位置，用来放三个表达式
1:初始化表达式：用var声明的一个普通的变量，通常用于作为计数器使用
2:条件表达式 ：用来决定每一次循环是否继续执行，就是终止的条件
3:更新表达式（操作表达式）：每次循环，最后执行的代码，经常用于我们计数器变量进行更新
for(初始化表达式;条件表达式;更新表达式){
循环体....
}
<script>
//第一种写法
for(var i=0;i<10;i++){
alert(i);
}
//第二种写法 for循环中的三个部分都可以省略，也都可以写在外部
var i=0;
for(;i<10;){
alert(i++);
}
//如果在for循环中，不写任何的表达式，只写两个;
//此时循环是一个死循环，会一直执行下去，慎用
for(;;){
alert("hello");
}
</script>
for循环的执行流程:
1:初始化表达式，初始化变量（初始化表达式，只会执行一次）
2:条件表达式，判断是否执行循环体，
3:如果为true，则执行循环，如果为false，终止循环
4:执行更新表达式，更新表达式执行完毕继续重复2
断点调试：
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试的过程中可以看到各个变量当前的值，出错的话，调试到出错的代码行既显示错误，停下。
扩展：
1、for循环，循环可以执行重复的代码
2、for循环，循环也可以执行不同的代码，因为由计数器变量i的存在，i每次循环值都会变化
3、for循环，因为由计数器的存在，还可以重复执行某些操作，比如做一些算数运算：例如：求1-100之间的累加和
课堂小练习：
1、求1-100之间所有数的平均值
var sum=0;
var average=0;
for(var i=1;i<=100;i++){
sum+=i
}
average=sum/100
2、求1-100之间所有偶数和奇数的和
var odd = 0;
var even = 0;
for(var i=1; i<=100; i++){
if(i%2 == 0){
even += i
}else{
odd += i
}
}
console.log('even:',even);
console.log('odd:',odd);
3、求1-100之间所有能被3整除的数字的和
var sum=0;
for(var i=1;i<=100;i++){
if(i%3==0){
sum+=i
}
}
console.log(sum)
4、要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩
<script>
var num = +prompt("请输入班级人数：");
var sum = 0;
var ave = 0;
for (var i = 1; i <= num; i++) {
var soce = +prompt("第" + i + "个同学的成绩是：");
sum += soce;
}
ave = sum / num;
console.log("总分：" + sum);
console.log("均分：" + ave);
</script>
5、一行打印五个小星星 *****
var str="";
for(var i=0;i<5;i++){
str+="*"
}
console.log(str)
双重for循环：
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如再for循环语句中，可以再嵌套一个for循环，这样的for循环语句，我们称之为双重for循环。
语法结构：
for（外层的初始表达式；外层的条件表达式；外层的操作表达式）{
for(里层的初始表达式；里层的条件表达式；里层的操作表达式){
执行语句
}
}
执行思路：
1、可以把里面的循环看作是外层循环的语句
2、外层循环循环一次，里面的循环执行全部
课堂小练习：
|
1、第一个图形 |
2、第二个图形 |
3、第三个图形 |
4、九九乘法表 |
|
***** ***** ***** ***** ***** |
* ** *** **** ***** |
***** **** *** ** * |
<script>
//第一种图形 写法1
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
document.write("* ");
}
document.write("<br/>"); //循环完一次 输出一个换行
}
// 第一种图形 写法2 拼接字符串
// * 1 <1 i=0
// ** 2 <2 i=1
// *** 3 <3 i=2
// **** 4 <4 i=3
// ***** 5 <5 i=4
var str = "";
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
str += "*";
}
// 一行打印完5个星星后，就要另起一行
str = str + "<br/>";
}
document.write(str);
//第二种图形
for (var i = 0; i < 5; i++) {
for (var j = 0; j < i + 1; j++) {
document.write("* ");
}
document.write("<br/>"); //输出一个换行
}
//第三种图形
// ***** 1 j<5(5-0) i=0
// **** 2 j<4(5-1) i=1
// *** 3 j<3(5-2) i=2
// ** 4 j<2(5-3) i=3
// * 5 j<1(5-4) i=4
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5 - i; j++) {
document.write("* ");
}
document.write("<br/>"); //输出一个换行
}
// 9 *9 乘法表
for(i=1;i<=9;i++){//获得1-9之间的数字 ，获得打印的行数，高度
for(j=1;j<=i;j++){//获得i以内的所有数字，获取每行打印的次数
// 组织打印出来的数据
document.write(j+"*"+i+"="+i*j+" ")
}
document.write("<br/>")
}
</script>
2、while循环
while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时，结束循环。
当不确定循环次数时候可以用while循环
while语句的语法结构
while（条件表达式）{
循环体代码
}
执行思路：
（1）、先执行条件表达式，如果结果为true，则执行循环体代码；如果为false，则退出循环，执行后面的代码
（2）、执行循环体代码
（3）、循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束
注意：
1、while循环里面也有计数器，初始化变量
2、while循环里应该也有操作表达式，完成计数器的更新，防止死循环
<script>
var i=0;//1:创建初始化一个变量
while(i<5){// 2:在循环中设置一个条件表达式
alert(i);
i++; // 3:定义一个更新表达式，每次更新初始化变量
}
</script>
课堂小练习：
1、打印人的一生，从1岁到100岁
var i=0;
while(i<=100){
document.write(`${i}`);
i++
}
2、计算1-100之间所有整数的和
<script>
var i = 1,
sum = 0;
while (i < 100) {
sum += i;
i++;
}
console.log(sum);
</script>
3、弹出一个提示框，你爱我吗？如果输入我爱你，则提示结束，否则，一直循环
<script>
var str;
while (str != "我爱你") {
str = prompt("我爱你");
}
</script>
3、do···while循环
do···while语句其实是while语句的一个变体，该循环会先执行一次代码块，然后对条件表示式进行判断，如果条件为真，就会重复执行循环体，否则退出循环
语法结构
do{
循环体
}while（条件表达式）
执行思路：
先执行一次循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环；
do...while可以保证循环体至少执行一次，而while不行
<script>
do {
str = prompt("你爱我吗？");
} while (str != "我爱你");
</script>
4、continue、break关键字
（1）、continue关键字
可以用来跳过当次循环，同样continue也是默认只会对离他最近的循环起作用
<script>
for (var i = 0; i < 5; i++) {
if (i == 2) {
continue;
}
console.log(i);
}
</script>
（2）、 break关键字
可以用来退出循环语句；会立即终止离他最近的那个循环语句
<script>
for (var i = 0; i < 5; i++) {
console.log(i);
//break;//用来结束for的循环语句，for只会循环一次
if (i == 2) {
break; //这个break是对整个for循环起作用的
}
}
for (var i = 0; i < 5; i++) {
console.log("@外层循环" + i);
for (var j = 0; j < 5; j++) {
break; //只会结束离他最近的内层循环
console.log("内层循环" + j);
}
}
</script>
（3）、break指定结束循环体
可以为循环语句创建一个标签名，来标识当前的循环；
语法：
标签名:循环语句
使用break语句时，break 标签名，可结束指定的循环，而不是最近的
<script>
outer: for (var i = 0; i < 5; i++) {
console.log("@外层循环" + i);
for (var j = 0; j < 5; j++) {
break outer; //指定结束外层的for循环
console.log("内层循环" + j);
}
}
</script> 