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

简介: 流程控制语句JS中的程序是从上到下一行一行执行的,通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行。

文章目录

流程控制语句

条件判断语句

条件判断语句小案例

条件分支语句

条件分支小案例

循环语句

while循环(先判断后执行)

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

while循环小案例

for循环

for循环小案例(水仙花数)

流程控制语句

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

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


条件判断语句

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

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


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

image.png

image.png

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)
            }
        }

4b555a79ae6b4a4795f79f45f2af1f27.gif

条件分支语句

switch. …case…default语句

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


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

如果比较结果为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循环中,为我们提供了专门的位置用来放三个表达式:


初始化表达式

条件表达式

更新表达式

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


相关文章
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
前端开发 项目管理
Gitflow分支策略及其在前端工程化中的应用
Gitflow 分支策略也并非适用于所有项目。对于一些小型或简单的前端项目,可能会显得过于复杂。在实际应用中,需要根据项目的具体情况和团队的需求进行适当调整和优化。
|
2月前
|
前端开发
结合具体案例分析Gitflow分支策略在大型前端项目中的应用优势
通过这个具体案例可以看出,Gitflow 分支策略在大型前端项目中能够提供有条不紊的开发环境,保障项目的稳定性和持续发展。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
73 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
111 1
|
2月前
|
前端开发
如何制定适合前端工程化的分支策略?
如何制定适合前端工程化的分支策略?
40 4
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
63 4
|
2月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
37 1
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
213 2
|
2月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
560 0