AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript02 分支语句/循环

2023-02-20 157
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： while循环、数据类型转换、语句表达式、if循环、switch选择与语句的使用

一、While循环

1. while循环概述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 语法:
        // while(循环条件){
        //     循环体
        // }
        // 执行流程:小括号代码如果为true,一直执行循环体,知道小括号里面值为false(循环条件)
        // 循环三要素:循环变量初始化 循环条件 变量更新
        // 需求:打印5次今天学习状态还不并且换行
    let val =1;
    while(val<6){
        document.write('今天学习状态还不错<br>')
        val++;
    }
    </script>
</body>
</html>

1.1 while循环实例·吃个包子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 需求:吃6个包子,跳过第三个包子 -->
```javascript
    <script>
        // continue;
        // let i = 1;
        // while (i <= 6) {
        //     if (i === 3) {
        //         // 自增后再去判断
        //         i++;
        //         // 遇到后跳出 
        //         continue;
        //     }
        //     document.write(`这是吃 的第${i}个包子<br>`);
        //     // 变量的变化
        //     i++;
        // }
        // break
        let a = 1;
        while (a <= 6) {
            if (a === 3) {
            // 遇到break后结束循环
                break;
            }
            document.write(`这是吃 的第${a}个包子<br>`);
            // 变量的变化
            a++;
        }
    </script>
</body>
</html>

1.2 while循环实例·用户登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        while (true) {
            let uname = prompt('请输入你的用户名')
            let pwd = +prompt('请输入你的密码')
            if ((uname === '初映') && (pwd === 1437)) {
                // 警告框不可以换行加<br>
                alert(`恭喜你,${uname}登录成功`)
                // 如果不是反引号``包起来的则将以字符串输出${name}无效
                break;
            }
            else {
                alert(`${uname}在数据库查询未检索到,请重试输入`)
                // continue;
            }
        }
    </script>
</body>
</html>

1.3 while循环实例·爱循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        while(true){
            let love = prompt('Do you love me ?')
            if(love =='love'){
                break
            }
        }
    </script>
</body>
</html>

二、数据类型的转换

2.1 数值型类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // 1.转数字Number(数据)
    console.log(Number('123'));//123
    // 如果Number()数据又非数字则会出现NaN(Not a Number)不是数字，但是是属于数字类型的
    // NaN是表示数据计算错误的结果，任何数据与NaN运算都是NaN
    console.log(NaN===NaN);//false
// prompt接收的内容为字符串类型的,计算需要转
let num1 = prompt('输入第一个数字')
let num2 = prompt('输入第二个数字')
alert(`两者之和为${Number(num1)+Number(num2)}`)
// 这种是隐式转换
let num3 = +prompt('输入第一个数字')
let num4 = +prompt('输入第二个数字')
    // 转为数字类型整数
    console.log (parseInt('18'));
    console.log (parseInt('18px'));//18多余字母忽略
    console.log (parseInt('abc18'));//NaN字母必须在后面
    console.log (parseInt('18.1'));//18
    // 转换为数字类型小数字
    console.log(parseInt('18.88'));
    console.log(parseInt('18.88px'));//18
    console.log(parseInt('px18.88'))//NaN;
    // 拓展：布尔类型 true是1 false是0
    console.log(true);
    console.log(false);
    </script>
</body>
</html>

2.2 转换为字符型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 其他类型强转字符串类型
        console.log(String(12));
        console.log(String(true));
        console.log(String(undefined));//undefined
        console.log(String(null));//null
        // toString（进制）
        let num = 10
        console.log(num.toString(2));//1010
    </script>
</body>
</html>

2.3 布尔类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 转布尔类型 Boolean(数据)
        // ' ' 0    null    undefined   false   NaN 这6个值转布尔都是false，其他都是true  
        // 注意 ' '里面包括了空格 不是''
        console.log(Boolean(' '));//true
        console.log(Boolean(''));///false
        console.log(Boolean(0));//false
        console.log(Boolean(null));//false
        console.log(Boolean(false));//false
        console.log(Boolean(undefined));//false
        console.log(Boolean(NaN));//false
    </script>
</body>
</html>

2.4 隐式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // +号作用 相加 拼接  当正好解析转换成数字类类型
        // 显式转换：主动转。隐式：js引擎帮我们转
        // 1.+号可以当正号解析，除了+号计算外，其他运算符会默认转换成数值类型 - * / %
        console.log('10'- '2');//8
        console.log(+'abc');//NaN
        console.log(10+ +'11'-10);//11
        // 2.+号的字符串拼接
        console.log('你好'+true);//‘你好true’
        // 3.!逻辑非默认转换成布尔类型，结果是取反之后的结果
        console.log(!2);//false
        console.log(!'你好');//false
    </script>
</body>
</html>

2.5null与undefined区别（拓展）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // <!-- 未定义变量没有赋值会出现undefined -->
        let a 
        console.log(a);
    // null空值一般表示这个变量以后会装一个对象
        let obj = null
    console.log(typeof obj);//object
    // null 和 undefined值相同，类型不同
    console.log(null==undefined);//true
    console.log(null===undefined);//false
// null和undefined转数字类型
console.log(Number(null));//0
console.log(Number(undefined));//NaN
// null 和 undefined转布尔类型
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
//抽象理解就是 null是建好了的房子没去住罢了 undefined则是相当于口头承诺建房子，实际上没有的
    </script>
</body>
</html>

三.语句表达式

表达式：由运算符组成的式子，一般用来取值

语句：向编译器发送指令，是一段可执行的代码

表达式有运算有值,没运算符参加的是语句

三大流程控制语句：顺序结构、分支结构 、循环结构

3.1 分支语句if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 分支语句 可惜选择想要执行的代码’ -->
    <!-- 常见if -->
    <!-- if( 默认为true) -->
    <script>
        // 当只有一个返回结果的时候，可以不写{}不推荐
    // if(10 == ('10')){
    //     alert('弹窗出来')
    // }
let score =+prompt('请输入你的成绩')
let name =prompt('请输入你的姓名')
    if (score > 700) {
        // 警告框不可以换行加<br>
        alert(`恭喜你,${name}成功上岸`)
        // 如果不是反引号``包起来的则将以字符串输出${name}无效
        // alert('恭喜你,${name}成功上岸')
    }else if(score<=500){
        alert(`抱歉,${name}已落榜`)
    }
    // 所有都不满足的时候才会执行else的结果
    else{
        alert(`数据库查询失败,请重试`)
    }
    </script>
</body>
</html>

3.2 分支语句if的使用实例·成绩判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // while (true) {
        let score = +prompt('请输入你的成绩')
        let name = prompt('请输入你的姓名(按下Q退出)')
        if ((score >= 90 && score <= 100)) {
            alert(`恭喜你,${name}成绩优秀`)
        }
        else if (score <= 80 && score > 70) {
            alert(`${name}成绩良好`)
        }
        else if (score <= 70 && score >= 60) {
            alert(`${name}成绩及格`)
        }
        else if (0<=score&& score < 60) {
            alert(`加油,${name}成绩不及格`)
        }
        else {
            alert(`成绩输入有误,请重试`)
        }
    </script>
</body>
</html>

3.3 三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>-
    <script>
        // 三元一次表达式:进行分支判断,二选一
    //  作用:进行分支判断 
    // 语法:   条件?true的结果:false失败的结果
    // 1>2?alert(`成功`):alert(`失败`)
    // 隐藏用法:三元一次表达式可以用于求职,如果没有值则返回undfined
    // alert没有值,直接输出了
    let val =10 > 20? alert('条件返回结果为10'):alert('条件返回结果为20')
    console.log(val);
    let val1=10 > 20?10 :20
    console.log(va1l);//返回的是20
    </script>
</body>
</html>

3.4 三元运算符实例·求最大值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 = +prompt('请输入第一个值');
        let num2 = + prompt('请输入第二个值');
        let max = num1 > num2 ? num1 : num2;
        console.log(max);
    </script>
</body>
</html>

3.5三元运算符实例·时钟补0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 需求:当一个数字小于10的时候需要在其前面补上数字0
        let num = +prompt('输出一个数字')
        // let time = num>10 ? num : ('0' + num);
        // alert(time)
        let times =10>num ? ('0' + num):num;
        // console.log(time);
        alert(times)
    </script>
</body>
</html>

四、switch语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 常用在全等值的判断,会去找小括号里面全等的case值 -->
    <script>
        //1. 多选1,遇到break也可利用case穿透做选项)结束
        // 2.不适用范围判断(推荐if),适合等值判断
        // 3.,遇到continue跳过本次
        // 语法:
        switch ('1') {
            case '1':
                alert('我是第一项')
            case '2':
                // break;
                alert('我是第二项')
            // continue;
            case '3':
                alert('我是第三项')
                // case '2':
                break;
            // 默认值
            default:
                alert('我是默认值')
        }
    </script>
</body>
</html>

4.1 switch语句实例·简单的两位数计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 需求:输入两个数字可以进行加减乘除的运算
        let num1 = +prompt('输入第一个数字');
        let num2 = +prompt('输入第二个数字');
        let mode = prompt('输入运算符');
        // switch里写判断项,case写判断依据
        switch (mode) {
            case '+': {
                alert(num1 + num2)
                break;
            }
            case '-': {
                alert(num1 - num2)
                break;
            }
            case '*': {
                alert(num1 * num2)
                break;
            }
            case '/': {
                alert(num1 / num2)
                break;
            }
            case '%': {
                alert(num1 % num2)
                break;
            }
            // 都没有的时候的默认值,不需要额外的写{}
            default:
                alert('输入的值有错误,请重新输入')
            }
    </script>
</body>
</html>

五.大综合案例

01.打印数字1-20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 需求:打印1-20之间所有的数字并且换行显示出来
        i = 0
        while (i <= 20) {
            document.write(`${i}<br>`)
            i++
        }
    </script>
</body>
</html>

02.打印1-100的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 定义sum收集数据, i负责循环
        let i=0,sum=0;
        while(i<100){
            i=i+1;
            sum=sum+i;
        }
        document.write(sum);
    </script>
</body>
</html>

03-打印100-200可被6整除的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 打印100-200之间,可以被6整除的数字 -->
    <!-- 逻辑分析:1.先遍历数字,获取100-200之间的所有的数字
                           2.做if判断在100-200中的i每一个都有6用于取余比较
                           3.进入if后除以6取余为0的记录下来,并且i++让循环进入下一步 -->
    <script>
        let i =100
        while(i<=200){
            if(i%6===0){
                document.write(i+` `)
                i++;
            }else{
                i++;
            }
        }
    </script>
</body>
</html>

04. 累计求和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 需求:计算1到这个数的和 比如用户输入5,则计算1-5之间的累加和
        // 我写的这个可以计算任意两个数字之间的和~~~
        let sum=0;
        let num = +prompt('计算的顶值');
        let i = +prompt('计算的低值');
        while(i<=num){
            sum =i+sum;
            i++;
        }
        document.write(sum);
    </script>
</body>
</html>

05.ATM取钱小程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let ballance = 0   //作用相当于设置一个钱包负责存放数据用的
        while (true) {
            let value = +prompt('1.存钱, 2,取钱 3.查看余额 4.退出')
            // 下面这个刚开始写的是case 4 但是这样break跳不出循环,因此把这个case4提取出来,写在while的下一级,当遇到break的时候会跳出来的
            if (value===4){
                break;
            }
            switch (value) {
                case 1:
                    let save = +prompt('请输入存钱的金额')
                    ballance += save;
                    alert('存钱成功!')
                    break;
                case 2:
                    let expand = +prompt('请输入取钱的金额')
                    if (ballance >= expand) {
                        alert('取钱成功');
                        ballance-=expand
                    } else
                        alert('取钱失败,余额不足!')
                        break;
                case 3:
                    alert(`当前余额剩余${ballance}RMB`)
                    break;
            }
        }
    </script>
</body>
</html>
文章标签：
编译器
小程序
关键词：
JavaScript循环
JavaScript分支
JavaScript分支循环
初映CY的前说
目录
相关文章
六卿
|
5月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句，包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性，并通过示例代码展示了它们的用法和区别。
六卿
66 6
JS循环for、for...of、for...in
尹正杰
|
5月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识，并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
尹正杰
77 2
JavaScript基础知识-流程控制之while循环
Li370234940
|
4月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
Li370234940
60 0
疯狂的猿
|
3月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画，js循环动画，简单的画面设计。非常丝滑有意思，欢迎对此代码感兴趣的朋友前来下载参考。
疯狂的猿
40 2
六卿
|
5月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句，包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
六卿
181 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
尹正杰
|
5月前
|
JavaScript 前端开发
JavaScript基础知识-forEach循环
关于JavaScript基础知识中forEach循环的介绍。
尹正杰
71 1
JavaScript基础知识-forEach循环
游客j4mujezz7vm7y
|
5月前
|
JavaScript 前端开发 索引
js循环
js循环
游客j4mujezz7vm7y
76 1
cqtianxin1
|
5月前
|
JavaScript 前端开发
JavaScript while 循环
JavaScript while 循环
cqtianxin1
23 3
我是快乐的嘟嘟
|
5月前
|
JavaScript
js 循环数组取值
js 循环数组取值
我是快乐的嘟嘟
62 2
shiningrise
|
4月前
|
JavaScript
自动循环提交js
自动循环提交js
shiningrise
29 0

热门文章

最新文章

  • 1
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
  • 2
    JavaScript闭包深入剖析：性能剖析与优化技巧
  • 3
    html+js+css实现的建筑方块立体数字时钟源码
  • 4
    如何通过pm2以cluster模式多进程部署next.js（包括docker下的部署）
  • 5
    Next.js 实战 (九)：使用 next-auth 完成第三方身份登录验证
  • 6
    JavaWeb JavaScript ③ JS的流程控制和函数
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 8
    Vue.js应用结合Redis数据库：实践与优化
  • 9
    一段 JavaScript 代码，集成网站AI语音助手
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
  • 1
    【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
    24
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js（包括docker下的部署）
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型