文章目录

• 流程控制
• • 1 代码块
  • • 1.1 声明代码块
    • 1.2 let 和 var的作用域
  • 2 条件判断语句 -- if语句
  • 3 条件分支语句
  • • 3.1 if-else语句
    • 3.2 if-else if-else语句
    • 3.3 练习
  • 4 Switch语句
  • 5 循环语句
  • • 5.1 While循环
    • 5.2 do-while循环
    • 5.3 for循环
    • 5.4 嵌套循环
  • 6 break和continue
  • • 6.1 break
    • 6.2 continue

流程控制

这部分内容讲解了JS中的流程控制语句。主要有：代码块、if-else语句、switch-case语句、while语句、do-while语句、for语句。

流程控制语句可以用来改变程序执行的顺序

1. 条件判断语句
2. 条件分支语句
3. 循环语句

1 代码块

1.1 声明代码块

使用 {} 来创建代码块，代码块可以用来对代码进行分组，

同一个代码中的代码，就是同一组代码，一个代码块中的代码要么都执行要么都不执行

整体执行顺序的话还是自上而下执行

{let a = 10console.log(a)
}
{console.log(b)document.write("哈哈")
}

1.2 let 和 var的作用域

• 在JS中，使用let声明的变量具有块作用域，在代码块中声明的变量无法在代码块的外部访问

• 使用var声明的变量，不具有块作用域

2 条件判断语句 – if语句

• 语法：

  if(条件表达式){语句...
  }
  

• 执行流程

  • if语句在执行会先对if后的条件表达式进行求值判断，
    • 如果结果为true，则执行if后的语句
    • 如果为false则不执行

• if语句只会控制紧随其后其后的那一行代码，如果希望可以控制多行代码，可以使用{}将语句扩起来

• 最佳实践：即使if后只有1行代码，我们也应该编写代码块，这样结构会更加的清晰

如果if后的添加表达式不是布尔值，会转换为布尔值然后再运算

if(true){console.log(10)
}let a = 20
if(a > 10){console.log("a比1 0大")
}if(a){console.log("a的值计算为true")
}

3 条件分支语句

3.1 if-else语句

• 语法：

  if(条件表达式){语句...
  }else{语句...
  }
  

• 执行流程：

  • if-else执行时，先对条件表达式进行求值判断，
    • 如果结果为true 则执行if后的语句
    • 如果结果为false 则执行else后的语句

let age = 55
if(age >= 60){alert('你已经退休了！')
}else{alert('你还没有退休！')
}

3.2 if-else if-else语句

• 语法：

  if(条件表达式){语句...
  }else if(条件表达式){语句...
  }else if(条件表达式){语句...
  }else if(条件表达式){语句...
  }else{语句...
  }
  

• 执行流程：

  • if-else if-else语句，会自上向下依次对if后的条件表达式进行求值判断，
    • 如果条件表达式结果为true，则执行当前if后的语句，执行完毕语句结束
    • 如果条件表达式结果为false，则继续向下判断，直到找到true为止
    • 如果所有的条件表达式都是false，则执行else后的语句

注意：if-else if-else语句中只会有一个代码块被执行，一旦有执行的代码块，下边的条件都不会在继续判断了，所以一定要注意条件的编写顺序

let age = 55
if (age >= 100) {alert('你真是一个长寿的人！')
} else if (age >= 80) {alert('你比楼上那位还年轻不小！')
} else if (age >= 60) {alert('你已经退休了！')
} else if (age >= 30) {alert('你已经步入中年了！')
} else if (age >= 18) {alert('你已经成年了！')
} else {alert('你还未成年！')
}

3.3 练习

使用promot()可以获取用户输入的内容，类型是字符串，所以如果需要数字的话需要先转换一下

它会将用户输入的内容以字符串的形式返回，可以通过变量来接收

let num = +prompt("请输入一个整数：")alert(typeof num)

1. 编写一个程序，获取一个用户输入的整数。然后通过程序显示这个数是奇数还是偶数。

   通过一个数对1取模判断是不是和0全等来看是不是一个小数

   

   使用isNaN()来判断一个值是不是NaN

   // let num = +prompt("请输入一个整数")
   let num = parseInt(prompt("请输入一个整数"))// 验证一下，用户的输入是否合法，只有是有效数字时，我们才检查它是否是偶数
   // 我们不能使用==或===来检查一个值是否是NaN
   // 可以使用isNaN()函数来检查一个值是否是NaN
   if (isNaN(num)) {alert("你的输入有问题，请输入整数！")
   } else if(num % 1 !== 0){alert("你的输入是小数，请输入整数！")  
   } else {// 然后通过程序显示这个数是奇数还是偶数。if (num % 2 === 0) {alert(`${num} 是偶数！`)} else {alert(`${num} 是奇数！`)}
   }
   

2. 从键盘输入小明的期末成绩:当成绩为100时，‘奖励一辆BMW’，当成绩为[80-99]时，‘奖励一台iphone’，当成绩为[60-79]时，‘奖励一本参考书’，其他时，什么奖励也没有

   //从键盘输入小明的期末成绩
   let score = +prompt('请输入小明的期末成绩：')// 检查score是否合法
   if (isNaN(score) || score < 0 || score > 100) {alert('请输入一个合法的分数')
   } else {// 当成绩为100时，'奖励一辆BMW'if (score === 100) {alert('汽车一辆~')} else if (score >= 80) {// 当成绩为[80-99]时，'奖励一台iphone'alert('手机一台~')} else if (score >= 60) {// 当成绩为[60-79]时，'奖励一本参考书'alert('参考书一本~')} else {// 其他时，什么奖励也没有alert('啥也没有~')}
   }
   

3. 大家都知道，男大当婚，女大当嫁。那么女方家长要嫁女儿，当然要提出一定的条件：，高：180cm以上; 富:1000万以上; 帅:500以上;，如果这三个条件同时满足，则:‘我一定要嫁给他’，如果三个条件有为真的情况，则:‘嫁吧，比上不足，比下有余。’，如果三个条件都不满足，则:‘不嫁！’

   // 获取男生的数据（身高、财富、颜值）
   let height = +prompt('请输入你的身高（厘米）：')
   let money = +prompt('请输入你的身价（万）：')
   let face = +prompt('请输入你的颜值（像素）：')// height 180↑  money 1000↑ face 500↑
   if (height > 180 && money > 1000 && face > 500) {// 如果这三个条件同时满足，则:'我一定要嫁给他'alert('我一定要嫁给他！')
   } else if (height > 180 || money > 1000 || face > 500) {// 如果三个条件有为真的情况，则:'嫁吧，比上不足，比下有余。'alert('嫁吧，比上不足，比下有余。')
   } else {// 如果三个条件都不满足，则:'不嫁！'alert('不嫁！')
   }
   

4 Switch语句

• 语法：

switch(表达式){case 表达式:代码...breakcase 表达式:代码...breakcase 表达式:代码...breakcase 表达式:代码...breakdefault:代码...break
}

• 执行的流程
  • switch语句在执行时，会依次将switch后的表达式和case后的表达式进行全等比较

    • 如果比较结果为true，则自当前case处开始执行代码

    • 如果比较结果为false，则继续比较其他case后的表达式，直到找到true为止

    • 如果所有的比较都是false，则执行default后的语句

• 注意：
  • 当比较结果为true时，会从当前case处开始执行代码
    • 也就是说case是代码执行的起始位置
  • 这就意味着只要是当前case后的代码，都会执行
  • 可以使用break来避免执行其他的case
• 总结

  • switch语句和if语句的功能是重复，switch能做的事if也能做，反之亦然。

  • 它们最大的不同在于，switch在多个全等判断时，结构比较清晰

例子：根据用户输入的数字显示中文

let num = +prompt("请输入一个数字")
/* 1 壹2 贰3 叁
*/
switch (num) {case 1:alert("壹")break // break可以用来结束switch语句case 2:alert("贰")breakcase 3:alert("叁")breakdefault:alert("我是default")break
}

使用if实现同样的功能

// 根据用户输入的数字显示中文
let num = +prompt("请输入一个数字")
/* 1 壹2 贰3 叁
*/
if (num === 1) {alert("壹")
} else if (num === 2) {alert("贰")
} else if (num === 3) {alert("叁")
}

5 循环语句

通过循环语句可以使指定的代码反复执行

JS中一共有三种循环语句

• while语句
• do-while语句
• for语句

通常编写一个循环，要有三个要件

1. 初始化表达式（初始化变量）
2. 条件表达式（设置循环运行的条件）
3. 更新表单式（修改初始化变量）

5.1 While循环

• 语法：

  while(条件表达式){语句...
  }
  

• 执行流程：

  • while语句在执行时，会先对条件表达式进行判断，
    • 如果结果为true，则执行循环体，执行完毕，继续判断
    • 如果为true，则再次执行循环体，执行完毕，继续判断，如此重复
    • 知道条件表达式结果为false时，循环结束

死循环：当一个循环的条件表达式恒为true时，这个循环就是一个死循环，会一直执行（慎用）

let i = 0		// 初始化表达式
while(i < 5){		// 条件表达式console.log(i)i++			// 更新表达式
}// 上面的循环等价于：
let i = 0
while(1){console.log(i)i++if(i >= 5){break}
}

练习：假设银行存款的年利率为5%，问1000块存多少年可以变成5000块

// 创建一个变量表示钱数
let money = 1000// 创建一个计数器来记录循环执行的次数
let year = 0// 编写循环，计算存款的年数
while(money < 5000){money *= 1.05 // 循环没执行一次，就相当于钱存了一年year++
}console.log(`需要存${year}年，最终的钱数为${money}元！`)

5.2 do-while循环

• 语法

  do{语句...
  }while(条件表达式)
  

• 执行顺序：

  • do-while语句在执行时，会先执行do后的循环体，执行完毕后，会对while后的条件表达式进行判断
    • 如果为false，则循环终止
    • 如果为true，则继续执行循环体，以此类推

• 和while的区别：

  • while语句是先判断再执行
  • do-while语句是先执行再判断
  • 实质的区别：
    • do-while语句可以确保循环至少执行一次

let i = 10
do{console.log(i)i++
}while(i < 5)// 等价以下while循环
let i = 10
while(i < 5){console.log(i)i++
}

5.3 for循环

for循环和while没有本质区别，都是用来反复执行代码

不同点就是语法结构，for循环更加清晰

• 语法：

  for(①初始化表达式; ②条件表达式; ④更新表达式){③语句...
  }
  

• 执行流程：
  ① 执行初始化表达式，初始化变量
  ② 执行条件表达式，判断循环是否执行（true执行，false终止）
  ③ 判断结果为true，则执行循环体
  ④ 执行更新表达式，对初始化变量进行修改
  ⑤ 重复②，直到判断为false为止

• 初始化表达式，在循环的整个的生命周期中只会执行1次

• for循环中的三个表达式都可以省略

  • 使用let在for循环的()中声明的变量是局部变量，只能在for循环内部访问
  • 使用var在for循环的()中声明的变量可以在for循环的外部访问

• 创建死循环的方式：

  • while(1){}
  • for(;;){}

for(let i=0; i<5; i++){console.log(i)
}

5.4 嵌套循环

在循环中也可以嵌套其他的循环

示例一：

for (let i = 0; i < 5; i++) {for (let j = 0; j < 5 - i; j++) {document.write("*  ")}document.write("
")
}

示例二：

for (let i = 0; i < 5; i++) {for (let j = 0; j < i + 1; j++) {document.write("*  ")}document.write("
")
}

示例三：

for (let i = 0; i < 5; i++) {// 创建一个内层循环来控制图形的宽度for (let j = 0; j < 5; j++) {document.write("*  ")}document.write("
")
}

6 break和continue

6.1 break

• break用来终止switch和循环语句
• break执行后，当前的switch或循环会立刻停止
• break会终止continue用来跳过当次循环

for (let i = 0; i < 5; i++) {if (i === 3) {break}console.log(i)
}

6.2 continue

continue用来跳过当次循环

for (let i = 0; i < 5; i++) {if (i === 3) {continue}console.log(i)
}