Javascript--流程控制

坚持@success

已于 2024-02-22 10:51:21 修改

阅读量1.1k

点赞数 22

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

于 2024-01-24 23:33:58 首次发布

本文链接：https://blog.csdn.net/m0_72210904/article/details/135833898

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的数据类型转换，包括自动类型转换和强制类型转换，以及流程控制语句如顺序流程、选择流程（单分支、双分支、多分支和switch）、循环流程（for、while、do...while）和continue/break的用法。还展示了如何使用这些语句实现九九乘法表的动态生成。

摘要由CSDN通过智能技术生成

数据类型转换

由于 javascrip 这个语言它是弱类型语言，即它对类型的要求不是很强，我们变量的类型最终取决于最后一次赋给这个变量的值。但是，我们在开发中还是会遇到要对数据进行转换的需求。

在进行数据类型转换时，有两种方式：

向下类型转换：也叫强制类型转换，一般发生在大的数据类型向小的数据类型转换。需要强制类型转换

向上类型转换：也叫自动类型转换，一般是小类型向大类型转换，这种方式是自动完成的。

自动类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动类型转换</title>
</head>
<body>
<script>
    let a = 10   // int
    console.log(typeof a)  // number
    a = 5.6   // float
    console.log(typeof a)  // number
</script>
</body>
</html>

强制类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换</title>
</head>
<body>
<script>
    let input = prompt('请输入一个整数')
    console.log(input, typeof input)

    // 将字符串转换为数值类型
    let result = parseInt(input)
    console.log(result, typeof result)
</script>
</body>
</html>

如果我们希望把数字字符串类型转换为数值类型，我们可以使用 paraseInt() ，使用这个函数时，它会把字符串转换为数值，但是如果这个字符串不能转，则返回 NaN

流程控制语句

流程控制语句也是我们经常听说的三大流程：顺序、选择、循环。

顺序流程

顺序流程指的是：代码的运行顺序是从左到右，从上到下的顺序来执行。

选择流程

选择结构主要是指：程序在运行过程中，有时需要面临一些不同情况的选择，根据情况执行不同的代码。这个选择结构三种：单分支、双分支、多分支。

单分支

单分支主要是针对一种情况下的判断，需要使用 if 语句来完成。它的使用结构为：

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

它的执行流程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单分支</title>
</head>
<body>
<script>
    let age = prompt('请输入你的年龄', '18')
    age = parseInt(age)
    if (age >= 18) {
        console.log('你已经成年了。')
    }
</script>
</body>
</html>

双分支

在单分支的基础上，还可以增加一种情况，当其中一种情况不满足时，就执行另一种情况。它的语法结构如下：

if (条件表达式) {
    条件为true时执行的代码
} else {
    条件为false时执行的代码
}

它执行流程图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双分支</title>
</head>
<body>
<script>
    let age = parseInt(prompt('请输入你的年龄', '18'))
    if (age >= 18) {
        console.log('你已经成年了')
    } else {
        console.log('你还未成年')
    }
</script>
</body>
</html>

多分支

有时我们的情况可能有多种，这时就需要使用多分支，多分支就是多重嵌套的使用。它的语法为：

if (条件表达式1) {
    表达式1为 true 时执行
} else if (条件表达式2) {
    表达式2为 true 时执行
} else if (条件表达式3) {
    表达式3为 true 时执行
} else {
    以上条件都不满足时执行
}

执行流程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多分支</title>
</head>
<body>
<script>
    let age = parseInt(prompt('请输入你的年龄', '18'))
    if (age <= 12) {
        console.log('你还要读小学')
    } else if (age <= 18) {
        console.log('你在读中学')
    } else if (age <= 22) {
        console.log('你在读大学')
    } else {
        console.log('你已经进入社会了')
    }
</script>
</body>
</html>

switch

多分支我们也可以使用 switch 语句来实现，它的语法为：

switch(表达式) {
    case 值1:
        语句块1
        break
    case 值2:
        语句块2
        break
    case 值n:
        语句块n
        break
    default:
        默认语句块
        break
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch语句</title>
</head>
<body>
<script>
    let week = parseInt(prompt('请输入今天是星期几'))
    switch (week) {
        case 1:
            console.log('今天是星期一')
            break
        case 2:
            console.log('今天是星期二')
            break
        case 3:
            console.log('今天是星期三')
            break
        case 4:
            console.log('今天是星期四')
            break
        case 5:
            console.log('今天是星期五')
            break
        case 6:
            console.log('今天是星期六')
            break
        case 7:
            console.log('今天是星期天')
            break
        default:
            console.log('你是火星来的')
            break
    }
</script>
</body>
</html>

代码分析：

如果case语句中没有 break，那么它会继续向下执行，直到遇到 break 为止或 switch 代码块结束。

default 语句可以放到 switch 语句的最后，也可以放到 switch 块的意义位置

如果 default 语句放到最后，则它的 break 是可以省略的；如果不在最后，则 break 语句不能省略

switch语句和多分支的使用场景：

switch语句是多分支语句的简写方式，它的执行效率要比多分支高
多分支这种方式的使用场景比swtich语句要宽

循环流程

我们有时希望我们某些功能反复的执行，这时就需要使用循环流程。在 JS 中循环流程有以下三种：

for 循环
while 循环
do..while循环

for循环

它的语法格式为：

for (let|var 变量=初值; 条件达式; 变量的步长) {
    循环体
}

执行流程分析：整个 for 循环分为四步：

第一步：给变量赋初值；

第二步：判断表达式的值是否为 true，如果为 true 则继续执行后面的步骤，如果值为 false 则退出循环

第三步：执行循环体

第四步：执行变量的步长

重复第二步到第四步。也就是说第一步只会执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环</title>
</head>
<body>
<script>
    for (let i = 1; i <= 5; i++) {
        console.log(i)
    }
</script>
</body>
</html>

需求：计算用户指定的数值内的和。

分析：

接收用户输入 prompt
将输入的值转换为整数 parseInt()
计算结果 for 循环

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环案例-求和</title>
</head>
<body>
<script>
    const num = parseInt(prompt('请输入一个整数', '1'))
    let sum = 0 // 用于存放计算的结果
    for (let i = 1; i <= num; i++) {
        sum += i
    }
    console.log('sum = ' + sum)
</script>
</body>
</html>

while循环

它的语法如下：

let 循环变量 = 初值
while (条件表达式) {
    循环体
    循环变量步长
}

简单使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while循环</title>
</head>
<body>
<script>
    let i = 1
    while (i<=5) {
        console.log(i)
        i++
    }
</script>
</body>
</html>

使用 while 循环来计算用户输入的值的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while循环案例-求和</title>
</head>
<body>
<script>
    let num = parseInt(prompt('请输入一个整数', '1'))
    let sum = 0  // 定义一个接收循环计算结果的变量
    let i = 1 // 循环变量并给他的初值为 1
    while (i <= num) {
        sum += i
        i++
    }
    console.log('sum = ' + sum)
</script>
</body>
</html>

do...while循环

它的语法结构：

let 循环变量 = 初值
do {
    循环体
    循环变量步长
} while(条件表达式)

简单使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>do...while循环</title>
</head>
<body>
<script>
    let i = 0
    do {
        console.log(i)
        i--
    } while (i > 0) // 不 i 的值等于 0 时就退出
</script>
</body>
</html>

从上面的代码运行结果可以发现，虽然条件表达式不满足，但是程序依然执行了一次。

如何选择

如果循环次数确定，那么优先选择 for 循环
如果循环次数不确定，那么优先选择 while 循环
如果循环至少要执行一次，则选择 do...while循环

continue和break

continue 它的作用是结束它所在层本次循环，进入到下一次循环。

break 它的作用是结束它所在层循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>continue和break</title>
</head>
<body>
需求：输出 1 ~ 10 之间的偶数，当数为 8 时就结束循环
<script>
    let num = 10
    for (let i = 1; i <= num; i++) {
        if (i === 8) break      // 如果 if 语句块中只有一行，则大括号可以省略

        if (i % 2 === 0) {
            console.log(i)
        } else {
            continue
        }
    }
</script>
</body>
</html>

循环案例

需求：输入九九乘法表

1 * 1 = 1
1 * 2 = 2   2 * 2 = 4
1 * 3 = 3   2 * 3 = 6   3 * 3 = 9
1 * 4 = 4   2 * 4 = 8   3 * 4 = 12
1 * 5 = 5   2 * 5 = 10  3 * 5 = 15
1 * 6 = 6   2 * 6 = 12  3 * 6 = 18
1 * 7 = 7   2 * 7 = 14  3 * 7 = 21
1 * 8 = 8   2 * 8 = 16  3 * 8 = 24
1 * 9 = 9   2 * 9 = 18  3 * 9 = 27

分析：

九九乘法表是有行有列，因此需要循环嵌套，外层循环是行，内层循环是列
我们可以使用 for、while、do..while，我们在这里循环 for 循环
我们需要使用制表符（\t）来让每一列有间隔
我们把九九乘法表输出到页面中，document.write()

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环嵌套-九九乘法表</title>
</head>
<body>
<script>
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            document.write(i + ' * ' + j + ' = ' + (i*j) + '\t\t')
        }
        document.write('<br>')
    }
</script>
</body>
</html>