JavaScript 学习笔记(二)-JavaScript 流程控制-分支

1. 流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构、和循环结构，这三种结构代表三种代码执行的顺序。

1. 顺序流程控制

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

2. 分支流程控制

1. 分支结构

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

JS 语言提供了两种分支结构语句

• if 语句
• switch 语句

2. if 语句

1. if 的语法结构:如果 if

   if (条件表达式) {
     // 执行语句
   }
   
   // 条件成立执行代码，否则什么也不做
   if (条件表达式) {
     // 条件成立执行的代码语句
   }

2. 执行思路:如果 if 里面的条件表达式结果为真 true 则执行大括号里面的执行语句

   如果 if 条件表达式结果为假 则不执行大括号里面的语句 则执行 if 语句后面的代码

3. 案例

   if (3 < 5) {
     alert('好好学习');
   }
   // 条件 3 < 5 不成立，则不执行大括号里面的语句

语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。

3. if-else 双分支语句

1. 语法结构

// if 如果	else	否则
if (条件表达式) {
  // 执行语句1
} else {
  // 执行语句2
}

2. 执行思路

如果表达式结果为真，执行语句 1；否则 执行语句 2

注意：

if 里面的语句 1 和 else 里面的语句 2，最终只能有一个语句执行

else 后面直接跟大括号

3. 案例

var age = prompt('请输入您的年龄');
if (age >= 16) {
  alert('祝您游戏愉快！');
} else {
  alert('小学生玩什么游戏，滚回家做作业去！');
}

4.判断闰年小案例

var year = prompt('请输入年份');
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
  alert(year + '年是闰年');
} else {
  alert(year + '年是平年');
}

算法：能被 4 整除且不能整除 100 的为闰年，或者能够被 400 整除的就是闰年

弹出 prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的语句，否则就执行 else 大括号里面的语句
一定要注意里面的且 && 还有或者 ||的写法，同时注意判断整除的方法是取余为 0

4. if-else-if 语句(多分支语句）

多分支语句就是利用多个条件来选择不同的语句执行，得到不同的结果

1.语法规范

if (条件表达式1) {
    // 语句1;
} else if (条件表达式2) {
    // 语句2;
} else if (条件表达式3) {
    // 语句3;
} else if (...) {
    ...
} else {
    // 最后的语句;
}

2.执行思路

如果条件表达式 1 满足就执行 语句 1 执行完毕后，退出整个 if 分支语句

如果条件表达式 1 不满足，则判断条件表达式 2，满足就执行语句 2，以此类推

如果以上所有表达式都不成立，则执行 else 里面的语句

3.注意点

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

4. 判断成绩小案例

弹出 prompt 输入框，让用户输入分数(score)，把这个值取过来存到变量 score 中
按照从大到小判断思路
使用多分支 if else if 语句来分别判断输出不同的值

var score = prompt('请输入你的分数');
if (score >= 90) {
  alert('A');
} else if (score >= 80) {
  alert('B');
} else if (scroe >= 70) {
  alert('C');
} else if (scroe >= 60) {
  alert('D');
} else {
  alert('E');
}

5. 三元表达式

有三元运算符组成的式子我们称为三元表达式

• 一元运算符：++num
• 二元运算符：3 + 5
• 三元运算符：? :

语法结构

条件表达式 ? 表达式 1 : 表达式 2

执行思路

如果条件表达式结果为真 则返回 表达式 1 的值；

如果条件表达式结果为假 则返回 表达式 2 的值；

var num = 10;
var result = num > 5 ? '是的' : '不是的'; // 表达式是有返回值的
console.log(result); // 结果返回 是的

数字补 0 小案例

用户输入一个数字

如果数字小于 10，则在这个数字前面补 0（加 0 拼接），否则 不做操作

var num = prompt('请输入一个数字');
var result = num < 10 ? '0' + num : num;
console.log(result); // 用户输入 1，结果返回为 01

6.switch 语句

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码

当要针对变量设置一系列的特定值的选项时，就可以使用 switch

1. 语法结构

switch (表达式) {
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    ...
    default:
    	// 表达式 不等于任何一个 value 时要执行的代码
}

var num = 3;
switch (num) {
  case 1:
    console.log('这是1');
    break;
  case 2:
    console.log('这是2');
    break;
  case 3:
    console.log('这是3'); // 与表达式匹配，执行此代码
    break;
  default:
    console.log('没有匹配的结果');
}

注意点

在实际开发中，表达式经常写成变量

num 的值 和 case 里面的值相匹配的时候是 全等，值和数据类型必须一致才可以

如果当前的 case 里面没有 break ，则不会退出 switch，而是继续执行下一个 case

2. switch 语句和 if else if 语句的区别

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

2. 循环

在程序中，一组被重复执行的语句被称为循环体

能否继续重复执行，取决于循环的终止条件

由循环体及循环的终止条件组成的语句，被称之为循环语句

1. for 循环

for 循环主要用于把某些代码循环若干次，通常跟计数有关系

1. 语法结构

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

• 初始化变量：用 var 声明一个普通变量，用于作为计数器使用

• 条件表达式：用来决定每一次循环是否继续执行，终止的条件

• 操作表达式：每次循环最后执行的代码，用于计数器变量进行更新（递增或者递减）

2. 循环执行相同代码

// 重复输出 10000 遍 5201314
for (var i = 1; i <= 10000; i++) {
  console.log('5201314');
}

// 让用户控制输出的次数
var num = prompt('请输入次数');
for (var i = 1; i <= num; i++) {
  console.log('5201314');
}

3. 循环执行不同代码

for 循环可以重复执行不同的代码，因为计数器变量 i 每次循环值都会变化

for (var i = 1; i <= 24; i++) {
  if (i == 24) {
    console.log('现在是北京时间24点整，凌晨了~');
  } else if (i == 8) {
    console.log('现在是北京时间8点整，早上好~');
  } else if (i == 12) {
    console.log('现在是北京时间12点整，中午好~');
  } else {
    console.log('现在是北京时间' + i + '点整');
  }
}

控制台输出以下内容：

2. 双重 for 循环（循环嵌套）

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

语法结构：

for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
  for (内层的初始化变量; 内层的条件表达式; 内层的操作表达式) {
    // 执行语句;
  }
}

外层循环一次，内层的循环执行全部

for (var i = 1; i <= 3; i++) {
  console.log('这是外层循环第' + i + '次');
  for (var j = 1; j <= 3; j++) {
    console.log('这是内层循环第' + j + '次');
  }
}

九九乘法表

​ 实现过程：

1. 一共有 9 行，每行的个数不一样
2. 外层的 for 循环控制行数 i，循环 9 次，可以打印 9 行
3. 内层的 for 循环控制每行公式 j
4. 核心算法：每一行 公式的个数 正好和 行数 一致，j <= i
5. 每行打印完毕，都需要重新换一行

var str = '';
for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= i; j++) {
    str += j + 'x' + i + '=' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

3. while 循环

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

语法结构如下：

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

执行思路：

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

4. do while 循环

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

语法结构：

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

执行思路：

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

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

5. continue break

1. continue 关键字

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

for (var i = 1; i <= 7; i++) {
  // 每周坚持学习 7 天
  if (i == 3) {
    continue; // 第三天打游戏忘记学习了
  }
  console.log('我已经连续学习' + i + '天啦');
}

2. break 关键字

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

for (var i = 1; i <= 7; i++) {
  // 每周坚持学习 7 天
  if (i == 3) {
    break; // 学习到第三天就放弃了
  }
  console.log('我已经连续学习' + i + '天啦');
}