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

最新推荐文章于 2024-07-20 23:54:17 发布

Hydrion-Qlz

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量325

点赞数 1

分类专栏： # JavaScript 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_46311811/article/details/128124306

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JavaScript

26 篇文章 3 订阅

订阅专栏

文章目录

流程控制

流程控制

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

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

条件判断语句
条件分支语句
循环语句

1 代码块

1.1 声明代码块

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

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

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

{
    let a = 10
    console.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取模判断是不是和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} 是奇数！`)
    }
}

从键盘输入小明的期末成绩:当成绩为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('啥也没有~')
    }
}

大家都知道，男大当婚，女大当嫁。那么女方家长要嫁女儿，当然要提出一定的条件：，高：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 表达式:
        代码...
        break
    case 表达式:
        代码...
        break
    case 表达式:
        代码...
        break
    case 表达式:
        代码...
        break
    default:
        代码...
        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("贰")
        break
    case 3:
        alert("叁")
        break
    default:
        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语句

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

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

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("*&nbsp;&nbsp;")
    }

    document.write("<br>")
}

示例二：

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

    document.write("<br>")
}

示例三：

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

    document.write("<br>")
}

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

Hydrion-Qlz

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript --04. 流程控制语句介绍

这部分内容讲解了JS中的流程控制语句。主要有：代码块、if-else语句、switch-case语句、while语句、do-while语句、for语句。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和conti
复制链接

扫一扫