web前端-JavaScript流程控制语句(条件判断,条件分支和循环语句)

简介: web前端-JavaScript流程控制语句(条件判断,条件分支和循环语句)

流程控制语句


JS中的程序是从上到下一行一行执行的,通过流程控制语句可以控制程序执行流程,

使程序可以根据一定的条件来选择执行


条件判断语句


使用条件判断语句可以在执行某个语句之前进行判断,如果条件成立才会执行语句,条件不成立则语句不执行。


注意:在条件表达式中判断为true才会执行后面的语句。含有多个条件表达式时用&&与运算符连接。


  • 语法一:if(条件表达式){语句...}


image.png


  • 语法二:if(条件表达式){语句...}else{语句...}


image.png


  • 语法三:if(条件表达式){语句...}else if(条件表达式){语句...}else if(条件表达式){语句...}else{语句...}


image.png


条件判断语句小案例


判断三数大小。


在javascript中可以用prompt函数来输入内容,调用此函数,会在浏览器中弹出一个输入框输入内容。默认输入为字符串!!!


        var num1,num2,num3;
        //前面+号转换为number类型
        num1 = +prompt('第一个数:');
        num2 = +prompt('第二个数:');
        num3 = +prompt('第三个数:');
        if(num1 < num2 && num1 < num3){
            if(num2<num3){
                alert(num1+'<'+num2 +'<' + num3)
            }else {
               alert(num1+'<'+num3 +'<' + num2)
            }
        }else if(num2<num1 && num2 < num3){
            if(num1 < num3){
                alert(num2+'<'+num1 +'<' + num3)
            }else {
                alert(num2+'<'+num3 +'<' + num1)
            }
        }else{
            if(num1 < num2 ){
              alert(num3+'<'+num1 +'<' + num2)
            }else {
                alert(num3+'<'+num2 +'<' + num1)
            }
        }


效果:


image.png


https://ucc.alicdn.com/images/user-upload-01/4b555a79ae6b4a4795f79f45f2af1f27.gif#pic_center


条件分支语句


switch. …case…default语句


在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较


  1. 如果比较结果为true,则从当前case处开始执行代码。当前case后的所有的代码都会执行,我们可以在case的后边跟着一个break关键字,这样可以确保只会执行当前case后的语句,而不会执行其他的case。


  1. 如果比较结果为false,则继续向下比较,如果所有的比较结果都为false,则只执行default后的语句。


  • 语法:switch(条件表达式){case 表达式1: 语句... break; case 表达式2: 语句... break default:语句... break }


image.png


条件分支小案例


用switch语句输出60分以上合格,60分以下不合格。


  • 方法一:


        var score = 65;
        //用score除以10取整可减少代码量。
        switch(parseInt(score/10)){
            case 6:
            case 7:
            case 8:
            case 9:
            case 10:
                console.log('成绩合格!!');
                break;
            default:
                console.log('成绩不合格!!');
                break;
        }
        //成绩合格!!


  • 方法二:


        var score = 50;
        switch(true){
            case score>=60:
                console.log('成绩合格!!');
                break;
            default:
                console.log('成绩不合格!!');
                break;
        }
        //成绩不合格!!


循环语句


while循环(先判断后执行)


while语句在执行时,先对条件表达式进行求值判断,如果值为true,则执行循环体,循环体执行完毕以后,继续对表达式进行判断如果为true,则继续执行循环体,以此类推,如果值为false,则终止循环。


  • 语法:while(条件表达式){语句...}


image.png


do…while循环(先执行后判断)


do. . .while语句在执行时,会先执行循环体,循环体执行完毕以后,在对while后的条件表达式进行判断,如果结果为true,则继续执行循环体,执行完毕继续判断,如果结果为false,则终止循环。


  • 语法:do{语句...}while(条件表达式)


image.png


两者区别:do…while循环是先执行后判断,即使条件不满足,也至少会执行一次,而while是先判断后执行,因此只有条件成立时才会执行。


while循环小案例


年利率为5%,存进1000元,需要多少年才能到5000元?


        var year = 0;
        var money = 1000;
        while(money<5000){
            money = money*1.05;
            year++;
        }
        console.log('共需'+ year + '年')
    //共需33年


for循环


for语句,也是一个循环语句,也称为for循环,在for循环中,为我们提供了专门的位置用来放三个表达式:


  1. 初始化表达式


  1. 条件表达式


  1. 更新表达式


for循环执行流程:1.执行初始化表达式,2.执行条件表达式,如果为true则执行语句,如果为false则结束,3.最后执行更新表达式。4.重复2


  • 语法:for(初始化表达式;条件表达式;更新表达式){语句...}


image.png


for循环小案例(水仙花数


水仙花数为3位数,如153=13+53+33 就是一个水仙花数。


        for(var i = 100; i < 1000; i++){
                //各位
                var x = i%10;
                //十位
                var y = parseInt(i/10)%10;
                //百位
                var z = parseInt(i/100);
                if(x*x*x + y*y*y + z*z*z == i){
                    console.log(i)
                }
        }


运行结果:


image.png

目录
相关文章
|
16天前
|
JavaScript 前端开发 安全
怎样用Node.js搭建web服务器
本文探讨了如何使用Node.js构建高效的HTTP服务器。首先,介绍了HTTP常见请求方法,如GET、POST、PUT等。接着,展示了如何使用Node.js的`http`模块创建服务器,并根据请求方法进行不同处理,如判断GET和POST请求,以及获取GET请求参数和处理POST请求数据。最后,讨论了服务器代码的模块化管理,包括路由管理和业务逻辑拆分,以提升代码的维护性和扩展性。通过本文,读者可以掌握基础的Node.js服务器开发及模块化设计技巧。
|
16天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
53 0
|
1月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
|
12天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
20 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
9天前
|
JavaScript 前端开发
第二篇-Javascript流程控制语句
第二篇-Javascript流程控制语句
11 3
|
12天前
|
JavaScript 前端开发
JS循环语句以及一些小练习
JS循环语句以及一些小练习
13 1
|
13天前
|
JavaScript 应用服务中间件 Apache
Node.js Web 模块
Node.js Web 模块
13 2
|
18天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
38 3
|
18天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
24 2
|
3天前
|
缓存 JavaScript 前端开发
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段