JavaScript程序结构

2024-09-01 14:04
文章标签 java script 程序结构

本文主要是介绍JavaScript程序结构,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

程序结构有三种:选择结构、循环结构 、顺序结构

一、选择结构

1、简介

根据条件进行判断,从而执行不同的操作,称为选择结构(分支结构),其实就是条件判断

选择结构的类型:if、switch

2、if结构

分为:单分支结构、二分支结构、多分支结构、嵌套if结构

 语法:

if(条件1){代码块1 
}else if(条件2){代码块2
}else if(条件3){代码块3
}
...
else{代码块n   
}
2.1if语句(单分支结构)

编写代码时,经常需要根据不同的条件执行不同的操作。

您可以通过在代码中使用条件语句来执行此操作。

如果指定的条件为 true,则使用 if 来指定将执行的代码块。

if (条件) {//条件为true时要执行的代码
}

只有当指定条件为 true 时,该语句才会执行代码。

var num = 10;
if (num < 20){document.write("hello");
}

执行结果: 

 

这是条件为 false 的另一个例子。

var num1 = 7;
var num2 = 10;
if (num1 > num2) {alert("num1比num2大");
}
alert("if结构之后的代码,和if结构无关");

当条件为false时,将跳过警报语句,程序继续执行if语句关闭大括号之后的行。

请注意,如果是大写字母(If或IF)将产生错误。

2.2else 语句(二分支结构

使用 else 语句指定一个代码块,如果条件为 false,则执行该代码块。

if (expression) {// 条件为 true 时执行
}
else {//  条件为 false 时执行
}

下面的示例演示如何使用 if ... else 语句。

var num1 = 7;var num2 = 10;if (num1 > num2) {alert("num1比num2大");}else{alert("num1比num2小");}

 执行结果:

2.3else if 语句(多分支结构)

如果第一个条件为 false,则可以使用 else if 语句指定新条件。

var course = 2;
if (course == 1) {document.write("<h1>HTML 教程</h1>");//如果 course 等于1,输出 "HTML教程"
} 
else if (course == 2) {document.write("<h1>CSS 教程</h1>");//或者 course 等于2,则输出 "CSS教程" 
} 
else {document.write("<h1>JavaScript 教程</h1>");//如果上述条件均不成立,则输出 "JavaScript教程"
}

执行结果:

 

 else 语句总是在 if 和 else if 后面 

当 if 与所有的 else if 条件均不成立时执行 else 语句代码块。

我们将 course 值设置为 3 时。

var course = 3;
if (course == 1) {document.write("<h1>HTML 教程</h1>");//如果 course 等于1,输出 "HTML教程"
} 
else if (course == 2) {document.write("<h1>CSS 教程</h1>");//或者 course 等于2,则输出 "CSS教程" 
} 
else {document.write("<h1>JavaScript 教程</h1>");//如果上述条件均不成立,则输出 "JavaScript教程"
}

执行结果: 

 

3、switch结构

3.1switch 语句

用来进行等值判断

switch 语句用于基于不同条件来执行不同的动作

 语法:

switch (表达式) {  // 表达式为要判断的内容case 常量1:代码块1break;case 常量 2:代码块2break;…default:  // 当所有常量都无法匹配时会执行default语句语句;
}

您可以使用多个 if ... else 语句来实现相同的结果,但是 switch 语句在这种情况下更有效

 3.2break 关键词

当javascript代码执行到 break 时, 将跳出 switch代码块 继续往下执行。

通常情况下一个 case 中放置一个 break

3.3default 关键词

如果 switch 中没有匹配的项,默认执行 default代码块

var today=Number(prompt("今天星期几(1-7):"));  switch(today){case 1:console.log("今天吃包子");break;//如果不写break,一旦匹配后就会一直往下执行,直到遇到break为止case 2:console.log("今天吃油条");break;case 3:case 4:case 5://相同操作的情况可以写成这样 console.log("今天吃煎饼");break;case 6:case 7:    console.log("今天不吃,今天睡到自然醒");break;default://如果前面的case都不匹配,才会执行defaultconsole.log("输入的参数错误!");break;    }

当输入8时执行结果:

如果不需要默认操作 default 可以省略 

4、两者的区别

  • switch结构

只能进行等值的判断,更直观

  • if结构

没有限制,适合某个连续区间的判断

​二、循环结构

1、 简介

重复性的执行某个操作,就是循环,称为循环结构

​ 循环结构的类型:while、do...while、for、for...in、for...of

2.、while循环

只要指定条件为 true,循环就可以一直执行代码块。

while 循环会在指定条件为真时循环执行代码块。

​ 语法:

while(条件){代码块
}

特点:先判断,再执行,只要条件成立就不停的执行

           条件可以是返回 true 或 false 的任何条件语句。

         如果您忘记增加条件中所用变量的值,该循环永远不会结束。这可能导致浏览器崩溃。

注意: 确保 while 循环中的条件最终变为 false, 不然循环永远不会结束

实例: 

//在页面上输出[1,200]之间所有能被7整除,但不能被4整除的所有整数,并统计个数,同时要求输出时每行显示5个var i=1;var count=0;//个数while(i<=200){if(i%7==0&&i%4!=0){document.write(i+"&nbsp;&nbsp;&nbsp;");//统计个数count++;//判断每输出5个,换一行if(count%5==0){document.write("<br>");}}i++;}document.write("<br>共计:"+count+"个")

执行结果: 

 

3、do...while循环

do while 循环是 while 循环的变体。该循环会在检查条件是否为真之前,执行一次代码块,然后如果条件为真的话,就会重复这个循环。

​ 语法:

do{代码块
}while(条件);

​ 特点:先执行,再判断,循环操作至少会执行一次

 注意: 在do ... while循环结束时使用的分号。

别忘记增加条件中所用变量的值,否则循环永远不会结束!

实例:

            //循环提示用户输入5个整数,然后输出其中的最大值和最小值//先提示用户输入一次,然后将该数字作为最大值和最小值var num=Number(prompt("请输入一个整数:"));var max=num;var min=num;var i=1;do{var num=Number(prompt("请输入一个整数:"));if(num>max){max=num;}if(num<min){min=num;}i++;}while(i<=4);console.log("最大值:"+max);console.log("最小值:"+min);

4、 for循环

循环可以将代码块执行指定的次数。

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

​ 语法:

for(初始化;条件;迭代){代码块
}

语句 1(初始化):在循环(代码块)开始之前执行。

语句 2 (条件):定义运行循环的条件(代码块)。

语句 3 (迭代):在执行循环(代码块)之后每次执行。

注意:3个语句都可以省略,但分号不能省略

实例:

            //循环输入5门课的成绩,并计算平均分var sum=0;for(i=1;i<=5;i++){var score=Number(prompt("请输入第"+i+"门课的成绩:"));sum+=score;}var avg=sum/5;console.log("5门课的平均分为:"+avg);

如果语句2返回 true,循环将重新开始,如果返回 false,循环将结束。 语句2也是可选的。

如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

语句3 也是可选的,通常用来改变初始的变量值,它可以做任何操作包括自增(i++),自减(i--),正增量(i=i+5)等任何语句。

var i = 0;
for (; i < 5; ) {document.write(i);i++;
}

 执行结果:

5、for...in循环

​ 对集合数据进行迭代遍历

​ 语法:

for(循环变量 in 集合){循环操作
}

​ 循环变量是遍历到的数据在集合中的索引顺序(从0开始),而非数据本身

​ 可以通过集合[循环变量]的形式获取数据

           var str="welcome";//字符串,可以将字符串看作是由许多字符组成的集合for(var index in str){//index表示集合中每个元素的索引/序号,索引从0开始,并不是元素本身console.log(index,str[index]);}

 

实例:

//提示用户输入一段英文,统计并输出其中的元音字母(aeiou)的个数var english=prompt("请输入一段英文:");//helloeveryonewoaixuexivar count=0;for(var i in english){if(english[i]=="a"||english[i]=="e"||english[i]=="i"||english[i]=="o"||english[i]=="u"){count++;}}console.log("共有"+count+"个元音字母");

执行结果:

 

6、 for...of循环

​ 对集合数据进行迭代遍历

​ 语法:

for(循环变量 of 集合){循环操作
}

​ 循环变量就是遍历到的数据本身

 var str="welcome";for(var c of str){//c表示集合中的每个元素console.log(c);}

执行结果:

 7、总结

​ 循环次数确定时一般使用for

​ 循环次数不确定时一般使用while和do...while

​ 对集合进行遍历时使用for...in和for...of

8、循环控制

​ break:跳出整个循环,执行循环之后的代码,一般与if一起使用

​ continue:跳出本次循环,执行下一次循环(本次尚未执行完的代码不再执行)

break:

//将1-20之间的整数相加,当累加值大于50时停止相加,输出当前整数和累加值var sum=0;for(var i=1;i<=20;i++){sum+=i;if(sum>50){console.log("当前整数:"+i+",累加值:"+sum);break;//停止循环的执行}}

执行结果:

continue:

//计算1-10之间所有偶数和var sum=0;for(var i=1;i<=10;i++){if(i%2!=0){continue;//如果i是奇数,则跳过本次循环,不累加,执行下一次循环}sum+=i;}console.log(sum);

执行结果:

9、二重循环

​ 一个循环中嵌套着另一个循环,称为二重循环,各种循环可以相互嵌套

  • 外层循环变量变化一次,内层循环变量要变化一遍
  • 二重循环中的break和continue,遵循就近原则
//某次程序大赛,共有三个班参加,每个班级有四名学生,输入各班级每个学生的成绩,然后计算各班级的平均分//外层循环控制班级数量for(var i=1;i<=3;i++){alert("请输入第"+i+"个班级的学生信息")//内层循环控制班级的学生数量var sum=0;//每个班级的部分for(var j=1;j<=4;j++){var score=Number(prompt("请输入第"+j+"个学生的成绩:"));sum+=score;}console.log("第"+i+"个班级的平均分为:"+sum/4);}

这篇关于JavaScript程序结构的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1127144

相关文章

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

Java字符串处理全解析(String、StringBuilder与StringBuffer)

《Java字符串处理全解析(String、StringBuilder与StringBuffer)》:本文主要介绍Java字符串处理全解析(String、StringBuilder与StringBu... 目录Java字符串处理全解析:String、StringBuilder与StringBuffer一、St

springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

《springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法》:本文主要介绍springboot整合阿里云百炼DeepSeek实现sse流式打印,本文给大家介绍的非常详细,对大... 目录1.开通阿里云百炼,获取到key2.新建SpringBoot项目3.工具类4.启动类5.测试类6.测

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,:本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖?1.2 核心危害二、Spring的三级缓存机制2.1 三

在Spring Boot中浅尝内存泄漏的实战记录

《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

浅析Java中如何优雅地处理null值

《浅析Java中如何优雅地处理null值》这篇文章主要为大家详细介绍了如何结合Lambda表达式和Optional,让Java更优雅地处理null值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录场景 1:不为 null 则执行场景 2:不为 null 则返回,为 null 则返回特定值或抛出异常场景

SpringMVC获取请求参数的方法

《SpringMVC获取请求参数的方法》:本文主要介绍SpringMVC获取请求参数的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 目录1、通过ServletAPI获取2、通过控制器方法的形参获取请求参数3、@RequestParam4、@

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll