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

目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
4月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
441 108
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
3月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
7月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
3月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
8月前
|
JavaScript 前端开发 API
|
9月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
495 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
6月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
195 1
|
6月前
|
JSON JavaScript 前端开发
JavaScript入门干货:蓝桥杯Web组分章学习笔记(基于蓝桥云课《JavaScript基础入门》)
这是一份详尽的JavaScript学习笔记,涵盖基础到进阶内容。包括变量、运算符、数组、字符串操作,DOM/BOM事件处理,内置对象(如Array、Date、Math)用法,JSON格式解析,以及函数作用域与闭包等核心概念。同时深入探讨值类型和引用类型的差异、异常处理机制,并介绍函数高级特性如call/apply/bind方法、递归及arguments对象。代码按章节分点整理,注释细致,适合初学者系统掌握JavaScript编程知识。
119 2

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改