当前位置： 首页 > news >正文

【JavaScript】筑基期功法——流程控制

news 来源：原创 2025/6/6 23:55:34

目录

  • 运算符
    • 赋值运算符
    • 自增运算符
    • 自减运算符
    • 比较运算符
    • 逻辑运算符
    • 运算符优先级
  • 流程控制语句
    • 分支语句
      • if 语句
      • 三元运算符
      • 案例：数字补0
      • switch 语句
    • 循环语句
      • while 循环
      • 循环退出
      • 案例：ATM 存款机
      • for 循环
      • 遍历数组
      • 循环嵌套

运算符

赋值运算符

对变量进行赋值的运算符

已经学过的赋值运算符：= 将等号右边的值赋予给左边，要求左边必须是一个容器

其他赋值运算符：+=、*=、/=、%=

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 = 2
        num1 += num1
        document.write(`num1=${num1}<br/>`)

        let num2 = 2
        num2 -= num2
        document.write(`num2=${num2}<br/>`)

        let num3 = 2
        num3 *= num3
        document.write(`num3=${num3}<br/>`)

        let num4 = 2
        num4 /= num4
        document.write(`num4=${num4}<br/>`)

        let num5 = 2
        num5 %= num5
        document.write(`num5=${num5}<br/>`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

自增运算符

符号：++

作用：让变量的值 +1

使用场景：用于计数

前置自增后置自增
++ii++
每执行一次，当前变量数值加 1每执行一次，当前变量数值加 1
相当于 num += 1相当于 num += 1
先自加再使用先使用再自加

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 = 1
        document.write(`前置自增的值为${++num1 + 10}<br>`)
        let num2 = 1
        document.write(`后置自增的值为${num2++ + 10}`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

自减运算符

符号：–

作用：让变量的值 -1

使用场景：用于计数

前置自减后置自减
–ii–
每执行一次，当前变量数值减 1每执行一次，当前变量数值减 1
相当于 num -= 1相当于 num -= 1
先自减再使用先使用再自减

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 = 1
        document.write(`前置自减的值为${--num1 + 10}<br>`)
        let num2 = 1
        document.write(`后置自减的值为${num2-- + 10}`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

比较运算符

使用场景：比较两个数据大小、是否相等

比较运算符：

  • >：左边是否大于右边
  • <：左边是否小于右边
  • >=：左边是否大于或等于右边
  • <=：左边是否小于或等于右边
  • ==：左右两边值是否相等
  • !=：左右两边是否不相等
  • ===：左右两边是否类型和值都相等
  • !==：左右两边是否不全等
  • 比较的结果为 boolean 类型，只会得到 true 或 false

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write(`3>2: ${3>2}<br>`)
        document.write(`3<2: ${3<2}<br>`)
        document.write(`3>=2: ${3>=2}<br>`)
        document.write(`3<=2: ${3<=2}<br>`)
        document.write(`3==2: ${3==2}<br>`)
        document.write(`3!=2: ${3!=2}<br>`)
        document.write(`3==='2': ${3==='2'}<br>`)
        document.write(`3!=='2': ${3!=='2'}<br>`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

注意事项：

  • 字符串比较的是字符对应的 ASCII 码
    • 从左往右依次比较
    • 如果第一位一样再比较第二位，以此类推
  • NaN 不等于任何值，包括它本身，涉及到 NaN 都是 false
  • 尽量不要比较小数，因为小数有精度问题
  • 不同类型之间比较会发生隐式转换
    • 最终把数据隐式转换成 number 类型再比较
    • 开发中精确的比较更推荐 === 或者 !==

逻辑运算符

符号名称日常读法特点口诀
&&逻辑与并且符号两边都为 true，结果才为 true一假则假
||逻辑或或者符号两边有一个 true 就为 true一真则真
!逻辑非取反true 变 false，false 变 true真变假，假变真

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write(`3<5 && 3>2 : ${3<5 && 3>2}<br>`)
        document.write(`3<5 && 3<2 : ${3<5 && 3<2}<br>`)
        document.write(`3>5 || 3>2 : ${3>5 || 3>2}<br>`)
        document.write(`3>5 || 3<2 : ${3>5 || 3<2}<br>`)
        document.write(`!(3<5) : ${!(3<5)}<br>`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

运算符优先级

优先级运算符顺序
1小括号()
2一元运算符++、–、!
3算数运算符先 *、/、% 后 +、-
4关系运算符>、>=、<、<=
5相等运算符==、!=、===、!==
6逻辑运算符先 && 后 ||
7赋值运算符=
8逗号运算符,

流程控制语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构

有时候要根据条件选择执行代码，这种就叫分支结构

某段代码被重复执行，就叫循环结构

在这里插入图片描述

分支语句

if 语句

if 语句有三种使用：单分支、双分支、多分支

单分支使用语法：

if(条件){
    满足条件要执行的语句
}
  • 括号内的条件为 true 时，进入大括号里执行代码
  • 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
  • 如果大括号只有一个语句，大括号可以省略，但是不提倡这么做

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        if(confirm('是否购买')){
            alert('购买成功')
        }
    </script>
</body>
</html>

结果如下：

屏幕录制 2025-03-25 195109

双分支使用语法：

if(条件){
    满足条件要执行的语句
} else {
    不满足条件要执行的语句
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        if(confirm('是否购买')){
            alert('购买成功')
        }else{
            alert('购买失败') 
        }
    </script>
</body>
</html>

结果如下：

屏幕录制 2025-03-25 195716

多分支使用语法：

if(条件1){
    满足条件1执行的语句
} else if(条件2){
    满足条件2执行的语句
} else if(条件3){
    满足条件3执行的语句
} else {
    所有条件都不满足执行的语句
}
  • 先判断条件 1，若满足条件 1 就执行代码 1，其他不执行
  • 若不满足则向下判断条件 2，满足条件 2 执行代码 2，其他不执行
  • 若依然不满足继续往下判断，依次类推
  • 若以上条件都不满足，执行 else 里的代码 n。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let score = +prompt('请输入成绩')
        if(score >= 90 && score <= 100){
            alert('A')
        }else if(score >= 80 && score < 90){
            alert('B')
        }else if(score >= 70 && score < 80){
            alert('C')
        }else{
            alert('D')
        }
    </script>
</body>
</html>

结果如下：

屏幕录制 2025-03-25 200834

三元运算符

使用场景：是比 if 双分支更简单的写法，可以使用三元表达式

符号：? 与 : 配合使用

语法：

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

一般用来取值

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 = +prompt('请输入第一个数')
        let num2 = +prompt('请输入第二个数')
        let num3 = +prompt('请输入第三个数')
        let max = (num1 > num2) ? ((num1 > num3) ? num1 : num3) : ((num2 > num3) ? num2 : num3)
        alert(`最大的数为：${max}`)
    </script>
</body>
</html>

结果如下：

屏幕录制 2025-03-25 202852

案例：数字补0

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = prompt('请输入一个数')
        num = num < 10 ? 0 + num : num
        alert(num)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

switch 语句

语法：

switch(数据){
    case 值1:
        代码1
        break
    case 值2:
        代码2
        break
    default:
        代码n
        break
}

  • 找到跟小括号里数据全等（===）的 case 值，并执行里面对应的代码

  • 若没有全等（===）的，则执行 default 里的代码

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        switch(prompt('请输入数字')){
            case '1':
                alert('今天是星期一')
                break 
            case '2':
                alert('今天是星期二')
                break
            case '3':
                alert('今天是星期三')
                break
            case '4':
                alert('今天是星期四')
                break
            case '5':
                alert('今天是星期五')
                break
            case '6':
                alert('今天是星期六')
                break
            case '7':
                alert('今天是星期日')
                break
            default:
                alert('输入错误')
        }
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

注意事项：

  • switch case 语句一般用于等值判断，不适合于区间判断
  • switch case 一般需要配合 break 关键字使用，没有 break 会造成 case 穿透

循环语句

while 循环

基本语法：

while(循环条件){
    要重复执行的代码（循环体）
}
  • 跟 if 语句很像，都要满足小括号里的条件为 true 才会进入 “循环体” 执行代码
  • while 大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

while 循环三要素：
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
所以，while 循环需要具备三要素：

  • 变量起始值
  • 终止条件（没有终止条件，循环会一直执行，造成死循环）
  • 变量变化量（用自增或者自减）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = +prompt('请输入一个数字')
        let sum = 0
        let i = 1 // 起始值
        while(i<=num){ // 终止条件
            sum += i
            i++ // 变量变化
        }
        document.write(`1到${num}的和为${sum}`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

循环退出

break：退出循环

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = +prompt('请购买的包子的数量')
        let i = 1
        while (i<=num){
            if(i === 3){
                document.write('吃了3个包子，吃饱了，不吃了')
                break
            } 
            document.write(`吃了${i}个包子<br>`)
            i++
        }
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

continue：结束本次循环，继续下次循环

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = +prompt('请购买的包子的数量')
        let i = 1
        while (i<=num){
            if(i === 3){
                i++
                continue
            } 
            document.write(`吃了${i}个包子<br>`)
            i++
        }
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

区别：

  • continue 退出本次循环，一般用于排除或者跳过某一个选项时使用
  • break 退出整个循环，一般用于结果已得到，后续循环无需执行时使用

案例：ATM 存款机

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let money = 100
        while (true) {
            let num = +prompt(`
                请输入您的操作：
                1. 存钱
                2. 取钱
                3. 查询余额
                4. 退出
            `)
            if(num === 4){
                alert('退出成功')
                break
            }
            switch (num) {
                case 1:
                    let save = +prompt('请输入您要存的钱数')
                    money += save
                    break
                case 2:
                    let take = +prompt('请输入您要取的钱数')
                    if(money >= take){
                        money -= take
                    }else{
                        alert('余额不足')
                    }
                    break
                case 3:
                    alert(`您的余额为${money}`)
                    break 
                default:
                    alert('输入错误')
                    break
            }
        }
    </script>
</body>
</html>

结果如下：

屏幕录制 2025-03-25 214706

for 循环

语法：

for(变量起始值;终止条件;变量变化量){
    // 循环体
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let sum = 0
        for(let i = 1;i <= 10;i++){
            sum += i
        }
        document.write(`1~10的和为${sum}`)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

遍历数组

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = ['刘德华','张学友','周星驰','黎明','郭富城','周华健','周杰伦','王力宏','陶喆']
        for(let i = 0;i < arr.length;i++){
            document.write(arr[i] + `&nbsp`) 
        }
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

循环嵌套

语法：

for(外部声明记录循环次数的变量;循环条件;变化值){
    for(内部声明记录循环次数的变量;循环条件;变化值){
        // 循环体
    }
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            width: 135px;
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px pink;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        for(let i = 1; i <= 9; i++){
            for(let j = 1; j <= i; j++){
                document.write(`<span>${i} X ${j} = ${i*j}</span>`)
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

相关文章：

  • 数据库操作以及字段类型讲解
  • Cudann 11.8同时安装tensorflow, pytorch
  • 云资源开发学习应用场景指南，场景 2：云桌面实验室
  • Spring Boot 3虚拟线程的使用
  • 【树莓派Pico FreeRTOS】-Mutex（互斥体）
  • 爬虫问题整理（2025.3.27）
  • linux0.11内核源码修仙传第十章——进程调度始化
  • Retinexformer：基于 Retinex 的单阶段 Transformer 低光照图像增强方法
  • 【消息队列】几个mq组件的对比: redis stream/rabbitmq/rocketmq/kafka
  • 【Python网络编程基础】
  • 六、小白学JAVA-类和对象
  • 【漏洞修复】Android 10 系统源码中的 glibc、curl、openssl、cups、zlib 更新到最新版本
  • ubuntu 22.04 一键安装 lxd
  • 【git拉取冲突解决】Please move or remove them before you merge. Aborting
  • RTMP推流+EasyDSS云服务+边缘AI分析的无人机监控系统设计
  • 【C++游戏引擎开发】《线性代数》（1）：环境配置与基础矩阵类设计
  • PHP安装HTML转图片的扩展GD库的使用
  • 江西核威环保科技：打造世界前沿的固液分离设备高新企业
  • 【C++】httplib：轻量级的 HTTP 服务器和客户端
  • 神奇的FlexBox弹性布局
  • 湖北省住房城乡建设厅网站查/网络营销是什么工作
  • 宁德做网站公司/石家庄seo公司
  • 黑龙江网站建设公司/我是新手如何做电商
  • 网站建设教程免费夕滋湖南岚鸿官网/百度网站大全旧版
  • 网站优化关键词公司/web成品网站源码免费
  • 网站制作学校要的/网络营销方法有哪些