• JavaScript --04. 流程控制语句介绍

    文章目录

    流程控制

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

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

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

    1 代码块

    1.1 声明代码块

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

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    1.2 let 和 var的作用域

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

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

    image-20221130140733508

    2 条件判断语句 – if语句

    • 语法：

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

      • 1
      • 2
      • 3

    • 执行流程

      • 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")
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    3 条件分支语句

    3.1 if-else语句

    • 语法：

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

      • 1
      • 2
      • 3
      • 4
      • 5

    • 执行流程：

      • if-else执行时，先对条件表达式进行求值判断，
        • 如果结果为true 则执行if后的语句
        • 如果结果为false 则执行else后的语句
    let age = 55
if(age >= 60){
    alert('你已经退休了！')
}else{
    alert('你还没有退休！')
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.2 if-else if-else语句

    • 语法：

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

    • 执行流程：

      • 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('你还未成年！')
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    3.3 练习

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

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

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

alert(typeof num)

    • 1
    • 2
    • 3

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

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

      image-20221130142440145

      使用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} 是奇数！`)
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

    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('啥也没有~')
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21

    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('不嫁！')
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16

    4 Switch语句

    • 语法：
    switch(表达式){
    case 表达式:
        代码...
        break
    case 表达式:
        代码...
        break
    case 表达式:
        代码...
        break
    case 表达式:
        代码...
        break
    default:
        代码...
        break
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 执行的流程
      • 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("贰")
        break
    case 3:
        alert("叁")
        break
    default:
        alert("我是default")
        break
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    使用if实现同样的功能

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    5 循环语句

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

    JS中一共有三种循环语句

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

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

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

    5.1 While循环

    • 语法：

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

      • 1
      • 2
      • 3

    • 执行流程：

      • 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
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

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

    // 创建一个变量表示钱数
let money = 1000

// 创建一个计数器来记录循环执行的次数
let year = 0

// 编写循环，计算存款的年数
while(money < 5000){
    money *= 1.05 // 循环没执行一次，就相当于钱存了一年
    year++
}

console.log(`需要存${year}年，最终的钱数为${money}元！`)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    5.2 do-while循环

    • 语法

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

      • 1
      • 2
      • 3

    • 执行顺序：

      • 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++
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    5.3 for循环

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

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

    • 语法：

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

      • 1
      • 2
      • 3

    • 执行流程：
      ① 执行初始化表达式，初始化变量
      ② 执行条件表达式，判断循环是否执行（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)
}

    • 1
    • 2
    • 3

    5.4 嵌套循环

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

    示例一：

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

    document.write("
    "    )
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    image-20221130185853455

    示例二：

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

    document.write("
    "    )
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    image-20221130185906370

    示例三：

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

    document.write("
    "    )
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    image-20221130185940203

    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)
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    6.2 continue

    continue用来跳过当次循环

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

  • 相关阅读:
    【Ubuntu】100 系统字体安装和更改
    leetcode 35. 搜索插入位置(二分法+找性质也很关键)
    shopee马来西亚和菲律宾站哪个好做？做shopee跨境如何选择站点？
    c语言进阶部分详解（《高质量C-C++编程》经典例题讲解及柔性数组）
    使用ruoyi框架遇到的问题修改记录
    用移动硬盘当系统盘，即插即用
    CSS 实现祥云纹理背景
    部门来了个测试开发，听说是00后，上来一顿操作给我看呆了...
    docker创建自定义网络
    基于SSH的客车网上售票系统
  • 原文地址：https://blog.csdn.net/qq_46311811/article/details/128124306