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

JavaScript02 分支语句/循环

2023-02-20 119
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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分支
初映CY的前说
目录
相关文章
长梦
|
4天前
|
JavaScript 前端开发 安全
JavaScript中的循环控制：while、do-while与for详解
【4月更文挑战第7天】本文探讨JavaScript的三种主要循环结构：while、do-while和for。while循环在满足条件时执行代码块，注意避免无限循环；do-while循环至少执行一次，适合先执行后判断的场景；for循环结合初始化、条件和迭代，适合遍历。理解每种循环的特点和适用场景，结合编程技巧，如使用break和continue，选择合适的循环方式，能提升代码效率和可读性。记得关注循环性能和避免不必要的计算。
长梦
20 0
泡芙-草莓
|
4天前
|
JavaScript
在循环内错误使用函数定义（js的问题）
在循环内错误使用函数定义（js的问题）
泡芙-草莓
13 0
是阿超
|
4天前
|
JavaScript
JS使用循环求100内奇数之和
JS使用循环求100内奇数之和
是阿超
18 1
天玄TX
|
4天前
|
JavaScript 前端开发
JS——while 循环和 do while 循环：究竟有什么区别？
JS——while 循环和 do while 循环：究竟有什么区别？
天玄TX
25 1
前端技术栈
|
4天前
|
JavaScript 前端开发
【面试题】在JS循环中使用await会怎么样？
【面试题】在JS循环中使用await会怎么样？
前端技术栈
38 0
阿珊和她的猫
|
2天前
|
JavaScript 前端开发
比较JavaScript中的for...in和for...of循环
比较JavaScript中的for...in和for...of循环
阿珊和她的猫
9 0
嘘~！
|
4天前
|
JavaScript 前端开发
JavaScript 循环方法详解
JavaScript 循环方法详解
嘘~！
21 1
景天科技苑
|
4天前
|
JSON JavaScript 前端开发
深入探讨javascript的流程控制与分支结构，以及js的函数
深入探讨javascript的流程控制与分支结构，以及js的函数
景天科技苑
17 0
程序员-刘华强
|
4天前
|
JavaScript 前端开发
JavaScript 条件循环语句（for 循环）
JavaScript 条件循环语句（for 循环）
程序员-刘华强
18 1
wscwdie
|
4天前
|
前端开发 JavaScript 开发者
遍历指南：JavaScript 中的 for、for-in、for-of 和 forEach 循环详解
遍历指南：JavaScript 中的 for、for-in、for-of 和 forEach 循环详解
wscwdie
22 3

热门文章

最新文章

  • 1
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 4
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 8
    【专栏】Vue.js和Node.js如何结合构建现代Web应用
  • 9
    JavaScript 权威指南第七版（GPT 重译）（一）(1)
  • 10
    JavaScript 权威指南第七版（GPT 重译）（五）(2)
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    147
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    19
  • 3
    描述 JavaScript 中的垃圾回收机制。
    23
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    36
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    27
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    23
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考