Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句

Posted 晚风(●•σ )

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句相关的知识,希望对你有一定的参考价值。

一、if条件语句

javascript中,if-else语句的格式如下:

if(表达式)
语句1
else
语句2

若要进行多个判断条件,可以通过if-else if-else语句,else-if可以为多个,当if里面的表达式1不成立时,执行表达式2,若表达式2不成立则执行语句3,格式如下:

if(表达式1)
语句1
else if(表达式2)
语句2
...
else
语句3

例如下列html代码,判断a的值然后通过alert()警告框输出a的值的判断情况,由于只有一条语句所以可以省略花括号,如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = -2;
			if (a == 0)
				alert("a的值等于0!")
			else if (a < 0)
				alert("a的值小于0!")
			else
				alert("a的值大于0!")
		</script>
	</body>
</html>

运行结果如下:

二、while循环语句

(一)while()语句

while循环语句是while()条件表达式为正确时,则重复执行代码块中的内容,直到表达式为错误时退出程序,不再执行循环中的代码。
例如下列代码,通过while循环计算1+2+3+…+100的值,并在控制台中输出:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 1;
			var sum = 0;
			while (a <= 1000) 
				sum = a + sum;
				a+=1;
			
			console.log("1+2+3+...+1000=",sum);
		</script>
	</body>
</html>

运行结果如下:

(二)do……while语句

另外还有do……while语句,该循环在每次检查表达式是否成立之前都会执行一次代码块(即do……while语句至少执行一次),若表达式为成立则重复循环,直到表达式不成立时退出循环,格式如下:
例如下列代码,并在控制台中输出:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var i = 0;
			do 
				i++;
				console.log(i);
			
			while (i < 10)
		</script>
	</body>
</html>

运行结果如下:

三、for循环语句

例如下列代码,利用for循环输出1!+2!+3!+……+10!的结果,直接让for循环执行10次,并在控制台中输出:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件语句</title>
	</head>
	<body>
		<script type="text/javascript">
			var i, j, sum;
			j = 1;
			sum = 0;
			for (i = 1; i <= 10; i++) 
				j *= i;
				sum += j;
			
			console.log("1!+2!+3!+...+10!=",sum);
		</script>
	</body>
</html>

运行结果如下:

另外,for循环语句中还有一个for…in循环语句,它用于枚举对象的属性,即循环遍历对象,例如下列代码,循环遍历number[]数组,并在控制台中输出:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件语句</title>
	</head>
	<body>
		<script type="text/javascript">
			var number = [0, 1, 2, 3, 4, 5];
			for (var i in number)
				console.log(number[i]);
		</script>
	</body>
</html>

运行结果如下:

四、switch语句

例如下列代码,学生成绩为80分,判断该学生的成绩等级并在控制台中输出(60分以下不及格,60-70分为及格,70-80分为良好,80-100分为优秀),其中switch(true)表示与case中表达式与其成立时匹配:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件语句</title>
	</head>
	<body>
		<script type="text/javascript">
			var score = 80;
			switch (true)
				case score < 60:
					console.log("不及格!");
					break;
				case score >= 60 && score < 70:
					console.log("及格!");
					break;
				case score >= 70 && score < 80:
					console.log("良好!");
					break;
				default:
					console.log("优秀!");
			
		</script>
	</body>
</html>

运行结果如下:

五、break语句和continue语句

与其他语言中的break语句和continue语句一样,break语句用于退出整个循环,continue语句用于退出本次循环。

以上是关于Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句的主要内容,如果未能解决你的问题,请参考以下文章

Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组

Web前端开发笔记——第四章 JavaScript程序设计 第三节 数据类型

Web前端开发笔记——第四章 JavaScript程序设计 第四节 条件语句和循环语句

Web前端开发笔记——第三章 CSS语言 第四节 CSS列表表格样式

Web前端开发笔记——第二章 HTML语言 第四节 超链接标签

web前端培训课程都学习啥内容?