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

目录
相关文章
|
1月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
257 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
41 0
|
1月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
65 41
|
8天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
16天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
32 4
|
14天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
14天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
22 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
16天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
26 2
|
19天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
26 1
|
20天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
17 1