Day11-JS：流程控制，选择语句，循环语句

流程控制

根据代码结构分类：

顺序结构——从上往下，依次执行

选择结构——选择性执行某些语句

if语句

if-else语句

if-else-if语句

switch语句

循环结构——根据条件重复执行某些代码

for循环

while循环

do-while循环

学习建议——

搞清楚每一种结构的语法

搞清楚他们的执行流程

搞清楚他们的应用场景

选择语句

if语句

语法

if(money >= 100){
  console.log('中午请吃饭')
}

执行流程

如果表达式成立，就执行语句体，否则就算了

作用

主要用于判断一个条件，只有条件成立，才会执行相应的代码

if-else语句

语法

if(money >= 100){
    console.log('中午请吃饭')
}else{
    console.log('放学别走')
}

执行流程

如果表达式成立，就执行语句体1，否则执行语句体2

作用

主要用于判断一个条件，不管条件成立成立与否，都会执行相应的代码

if语句的嵌套

var gender = prompt('请输入您的性别(男/女)：')
if(gender = "女"){
    alert('你妈妈喊你回家吃饭')
}else{
    var age = Number(prompt('请输入您的年龄：'))
    if(age >= 18){
        alert('给你点刺激的东西看')
    }else{
        alert('喊你回家吃饭')
    }
}

if-else-if语句

语法

if（条件表达式）{
    语句体1
}else if（条件表达式2）{
    语句体2
}else if（条件表达式3）{
    语句体3
}else{
    语句体n
}

作用：用于判断多个条件

执行流程

1、从上到下，依次判断每一个条件，如果满足，就会执行相应的语句体，剩下的条件即使满足，也不会执行

2、如果前面的条件都不满足，就会执行最后的else语句

带判断的if-else-if

if (grade < 0 || grade > 100) {
    alert('你输入的成绩不合法')
} else {
    if (grade >= 90 && grade <= 100) {
        alert('奖励兰博基尼，带电池')
    } else if (grade >= 80 && grade < 90) {
        alert('奖励自行车')
    } else if (grade >= 70 && grade < 80) {
        alert('奖励滑板')
    } else {
        alert('奖励一顿胖揍')
    }

JavaScript switch 语句

switch 语句用于基于不同的条件来执行不同的动作。

语法

switch(表达式或变量){
  case 值1:
      执行代码块 1
      break;
  case 值2:
      执行代码块 2
      break;
  ……
  default:
      前面所有条件都不满足，执行
      break;(分号可以不要)
}
// 示例
switch(num%2){
  case 1:
      alert('奇数')
      break
  case 2:
      alert('偶数')
      break
  default :
      alert('你输入的不是一个整数')
      break
}

执行流程

根据表达式/变量的值依次进行判断

如果满足对应的条件，就执行相应的语句体

如果都不满足，就执行default中的语句

case穿透

原因

break是用来结束循环和switch语句的

如果忘记写break，就会产生case的穿透

流程

case穿透会从满足条件的那个case语句开始，往后依次执行

即使后面的case不满足条件，也会执行对应语句体。直到遇到下一个break才会停止

选择语句区别

if语句和if-else语句——一次只能判断一个条件

if-else-if和switch——一次可以判断多个条件

所有switch语句都可以使用if-else-if改写

但是if-else-if不一定能用switch改写

应用场景

if语句，主要用于范围的判断；switch语句主要用于等值判断

如果结果只有固定几个取值-switch，层次清晰

JavaScript for 循环

语法

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}
for (初始化语句;条件判断语句;循环增量语句)
{ 
    循环体语句；
}

执行流程

1. var i=0
2. i<cars.length
3. i++
4. document.write(cars[i] + "<br>")

执行顺序：1--2--4--3>2--4--3>2--4--3>2--4--3……（当i自增到不满足2时，跳出循环）

验证：循环变量是可以直接使用在循环体中

for循环求和：

1. 在循环的外面定义一个求和变量（框变量）
2. 在循环中拿到每一个元素，累加到框变量中（sum += i）
3. 循环结束之后，框变量中的值，就是最终求和的结果

使用ES6语句_模板字符串改进字符串拼接操作

1. 输入班级人数
2. 根据输入的人数，输入学生成绩
3. 计算总成绩
4. 计算平均成绩

var num = +prompt(`请输入班级人数：`)
var sum = 0
var average = 0

for(var i=1;i<=num;i++){
    var num2 = +prompt(`请输入第${i}位学生的成绩`)
    sum += num2 // 累加
}
console.log(`总成绩为：${sum}`)
console.log(`平均成绩为：${sum/num}`)

把('请输入第' + i + '位学生的成绩')改为(`请输入第${i}位学生的成绩`)，动态获取i值拼接入内容

var cows = +prompt('请输入您想要的星星行数：')
for (var i = 1; i <= cows; i++) {
    for (var j = 1; j <= i; j++) {
        document.write('☆')
    }
    document.write('<br>')
}

for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        document.write(`${i}*${j}=${i*j}    `)
    }
    document.write('<br>')
}

外层循环控制行数，内层循环控制列数

while循环

基本格式：（一般用于写死循环，无法控制循环次数）
while (条件)
    {
        需要执行的代码
    }

完整格式（可以控制循环次数）
初始化语句
while (条件判断语句)
{
    循环体语句;
    循环增量语句;
}
while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

本质是把for循环的语句换了个位置

执行顺序：条件判断-循环体-循环增量-条件判断……

do-while循环

初始化语句
do{
  循环体语句;
  循环增量语句;
}while (条件判断语句)

特点

——先执行循环体，再判断条件

即使循环的条件不成立，也会执行一次循环体