web前端学习(三十六)——JavaScript重要语句(if...else if...else、switch、for、while、break、continue)的相关设置

news/2025/2/26 7:31:28

1.JS条件语句

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

通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中,我们可使用以下条件语句:

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

1.1 if语句 

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

if(condition) {
    当条件为 true 时执行的代码
}

1.2 if...else语句

使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。 

if(condition) {
    当条件为 true 时执行的代码
}else {
    当条件不为 true 时执行的代码
}

1.3 if...else if...else语句

使用 if....else if...else 语句来选择多个代码块之一来执行。 

if(condition1) {
    当条件 1 为 true 时执行的代码
}else if(condition2) {
    当条件 2 为 true 时执行的代码
}else {
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

1.4 小实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>如果时间的不同,会获得相应的问候。</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
				var x="";
				var time=new Date().getHours();
				if(time<12) {
					x="<b>早上好!!!</b>";
				}else if(time>=12 && time<18) {
					x="<b>下午好!!!</b>";
				}else{
					x="<b>晚上好!!!</b>";
				}
				document.getElementById("demo").innerHTML=x;
			}
		</script>
	</body>
</html>

1.5 switch语句

switch 语句用于基于不同的条件来执行不同的动作。使用 default 关键词来规定匹配不存在时做的事情。

首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>点击下面的按钮来显示今天是周几:</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
				var x;
				var d=new Date().getDay();
				switch(d) {
					case 1 :
						x="今天是星期一!!!";
						break;
					case 2 :
						x="今天是星期二!!!";
						break;
					case 3 :
						x="今天是星期三!!!";
						break;
					case 4 :
						x="今天是星期四!!!";
						break;
					case 5 :
						x="今天是星期五!!!";
						break;
					default :
						x="到周末啦!!!";
						break;
				}
				document.getElementById("demo").innerHTML=x;
			}
		</script>
	</body>
</html>

2.JS循环语句

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

2.1 for循环 

for(语句 1; 语句 2; 语句 3) {
    被执行的代码块
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<script>
			mobiles=["huawei","oppo","mi","vivo"];
			for(var i=0;i<mobiles.length;i++) {
				document.write(mobiles[i] + "<br />");
			}
			/* 省略语句1的写法
				var i=0;
				for(;i<mobiles.length;i++) {
					document.write(mobiles[i] + "<br />");
				}
			*/
			/* 省略语句2的写法
				for(var i=0;;i++) {
					if(i>=mobiles.length) {
						break;
					}
					document.write(mobiles[i] + "<br />");
				}
			*/
			/* 省略语句3的写法
				for(var i=0;i<mobiles.length;) {
					document.write(mobiles[i] + "<br />");
					i++;
				}
			*/
		</script>
	</body>
</html>

2.2 for/in循环

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
				var x;
				var str="";
				var person={姓名:"张三",性别:"男",年龄:30,爱好:"睡觉"};
				for(x in person) {
					str=str + person[x] + " ";
				}
				document.getElementById("demo").innerHTML=str;
			}
		</script>
	</body>
</html>

2.3 while循环

while(条件) {
    需要执行的代码
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<script>
			var i=0;
			mobiles=["huawei","oppo","mi","vivo"];
			while(mobiles[i]) {
				document.write(mobiles[i] + "<br />");
				i++;
			}
		</script>
	</body>
</html>

2.4 do-while循环 

do {
    需要执行的代码
}while(条件);
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>点击下面的按钮,只要 i 小于 5 就一直循环代码块。</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
				var i=0,x="";
				while(i<5) {
					x=x + "该数字为 " + i + "<br />";
					i++;
				}
				/* 转为do-while循环如下:
					do{
						x=x + "该数字为 " + i + "<br />";
						i++;
					}while(i<5)
				*/
				document.getElementById("demo").innerHTML=x;
			}
		</script>
	</body>
</html>


3.JS控制语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

3.1 break语句 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>点击按钮,测试带有 break 语句的循环。</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
				var x="",i=0;
				for(i=0;i<10;i++) {
					if(i==5) {
						break;
					}
					x=x + "该数字为 " + i + "<br />";
				}
				document.getElementById("demo").innerHTML=x;
			}
		</script>
	</body>
</html>

3.2 continue语句

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>点击下面的按钮来执行循环,该循环会跳过 i=3 的数字。</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
				var x="",i=0;
				for(i=0;i<10;i++) {
					if(i==3) {
						continue;
					}
					x=x + "该数字为 " + i + "<br />";
				}
				document.getElementById("demo").innerHTML=x;
			}
		</script>
	</body>
</html>

3.3 使用JS标签跳出循环

如需标记 JavaScript 语句,请在语句之前加上冒号:

label: statements

break 和 continue 语句仅仅是能够跳出代码块的语句。

break labelname; 
 
continue labelname;
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<script>
			colors=["red","green","blue","black","white"];
			list: {
				document.write(colors[0] + "<br />");
				document.write(colors[1] + "<br />");
				document.write(colors[2] + "<br />");
				break list;
				document.write(colors[3] + "<br />");
				document.write(colors[4] + "<br />");
			}
		</script>
	</body>
</html>

 


http://www.niftyadmin.cn/n/712159.html

相关文章

Button的四种点击事件

1.XML文件布局<Buttonandroid:id"id/bt1"android:layout_width"wrap_content"android:layout_height"wrap_content"android:onClick"doClick"android:text"XML添加doClick"android:layout_above"id/bt2"androi…

zabbix 安装 部署 网络监控

zabbix 部署详解zabbix简介是一个高度集成的网络监控解决方案&#xff0c;可以提供企业级的开源分布式监控解决方案&#xff0c;由一个国外的团队持续维护更新&#xff0c;软件可以自由下载使用&#xff0c;运作团队靠提供收费的技术支持赢利Zabbix主要功能&#xff1a;- CPU负…

python fail to execute,用python可视化文件时报ExecutableNotFound: failed to execute ['dot', '-Tsvg']的错...

如上图所示&#xff0c;运行代码之后报ExecutableNotFound: failed to execute [dot, -Tsvg], make sure the Graphviz executables are on your systems PATH的错误&#xff0c;起初以为原因是未安装graphviz模块&#xff0c;pip一下发现还是不行&#xff0c;后来才发现需要先…

一步一步学习Redis——HyperLogLog的相关命令

文章目录&#xff1a; 1.开篇 2.Redis HyperLogLog的相关命令 2.1 PFADD命令 语法 返回值 2.2 PFCOUNT命令 语法 返回值 2.3 PFMERGE命令 语法 返回值 1.开篇 Redis 在 2.8.9 版本添加了 HyperLogLog 结构。 Redis HyperLogLog 是用来做基数统计的算法&#xff0c;H…

labels用python 怎么用_Python wx.TR_EDIT_LABELS属性代码示例

# 需要导入模块: import wx [as 别名]# 或者: from wx import TR_EDIT_LABELS [as 别名]def __init__(self, parent, folder, filterNone, editableTrue):wx.Panel.__init__(self, parent, stylewx.TAB_TRAVERSAL)main_sizer wx.BoxSizer(wx.VERTICAL)self.Tree wx.TreeCtrl(…

重载new和delete运算符

内存管理运算符 new、new[]、delete 和 delete[] 也可以进行重载&#xff0c;其重载形式既可以是类的成员函数&#xff0c;也可以是全局函数。一般情况下&#xff0c;内建的内存管理运算符就够用了&#xff0c;只有在需要自己管理内存时才会重载。以成员函数的形式重载 new 运算…

工作vs.学�

近一两年来&#xff0c;我先后对&#xff3b;工作与学习&#xff3d;的复杂过程有过多次的头脑风暴&#xff0c;而且感觉在这方面略有所成&#xff08;看这里和这里&#xff09;&#xff1b;当然既然仅仅是头脑风暴&#xff0c;所谓的所成也仅仅是一些粗糙的想法&#xff0c;一…

web前端学习(三十七)——JavaScript typeof、null、undefined及简单类型转换的相关设置

1.JS几个重要的操作符与变量值 1.1 typeof 可以使用 typeof 操作符来检测变量的数据类型。 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><title>JS简单学习</title></head><body><…