流程控制语句

JavaScript流程控制语句包括了if语句、switch语句、for循环、while循环、do/while循环、continue语句和break语句等。

1、if语句

if语句用于实现分支选择,根据条件成立与否,执行不同的代码段,if语句有以下三种格式,如下:

(1)格式一

if(条件表达式){
代码段
}

如果条件表达式计算结果为true,则执行大括号中的代码段,否则跳过if语句,执行后续代码,如果代码段中只有一条语句,可以省略大括号,如下:

if(x % 2 == 0)
document.write(x + "是偶数");

(2)格式二

if(条件表达式){
代码段1
}else{
代码段2
}

如果条件表达式计算结果为true,则执行代码段1中的语句,否则执行代码段2中的语句,如下:

if(x % 2 == 0)
document.write(x + "是偶数");
else
document.write(x + "是奇数");

(3)格式三

if(条件表达式1){
代码段1
}else if(条件表达式2){
代码段2
}
......
else if(条件表达式n){
代码段n
}else{
代码段n+1
}

JavaScript依次判断各个条件,只有在前一个条件表达式计算结果为false时,才会计算下一个条件,当某个条件表达式计算结果为true是,执行对应的代码段,对应代码段中的语句执行完成后,if语句结束。只有在所有条件表达式的计算结果都为false是,才会执行else部分的代码段,else部分可以省略。

下面我用if语句来写一个对成绩评价的实例吧,代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function rate(){
				x = document.getElementById("score").value;
				if(x < 0 || x > 100){
					y = "无效成绩!";
				}else if(x < 60){
					y = "不及格!";
				}else if(x < 70){
					y = "及格!";
				}else if(x < 90){
					y = "中等!";
				}else{
					y = "优秀";
				}
				document.getElementById("out").innerHTML = y;
			}
		</script>
	</head>
	<body>
	  <form>	
		<label>请输入分数:</label>
		<input type="text" id="score" value="0" size="5" />
		<input type="button" value="显示评语" onclick="rate()" /><br />
		<label>评语:</label><span id="out"></span>
	  </form>
	</body>
</html>

运行结果如下

JavaScript核心语法基础二-技术中文网
JavaScript核心语法基础二-技术中文网

2、switch语句

switch语句用于现实多分支选择,其基本格式如下:

switch(n){
case 标号1:
代码段1
break;
case 标号2:
代码段2
break;
......
case 标号n:
代码段n
break;
default:
代码段n+1
}

每个case关键字定义一个标号,标号不区别大小。default部分可以省略,switch语句执行时,首先计算n的值,然后依次测试case标号是否与n值匹配,如果匹配则执行对应的代码段中的语句,否则测试下一个case标号是否匹配,只要有一个case标号匹配,JavaScript就不会在测试是否还有匹配标号,如果所有标号均不匹配,则执行default部分的语句块(如果有的话)。
每个case快末尾的break用于跳出switch语句,break不是必须的,如果没有break,JavaScript会在该case块中的语句执行结束后,继续执行后续的case,知道遇见break或switch语句结束。

下面用switch语句来写对成绩评价的实例,代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function rate(){
				x = document.getElementById("score").value;
				x = Math.floor(x / 10);
				switch(x){
					case 0:
					case 1:
					case 2:
					case 3:
					case 4:
					case 5:
					y = "不及格!";
					break;
					case 6:
					y = "及格!";
					break;
					case 7:
					case 8:
					y = "中等!";
					break;
					case 9:
					case 10:
					y = "优秀!";
					break;
					default:
					y = "无效成绩!";
				}
                                //这里使用innerHTML也可以,效果一样
				document.getElementById("out").innerText = y;
			}
		</script>
	</head>
	<body>
	  <form>	
		<label>请输入分数:</label>
		<input type="text" id="score" value="0" size="5" />
		<input type="button" value="显示评语" onclick="rate()" /><br />
		<label>评语:</label><span id="out"></span>
	  </form>
	</body>
</html>

运行结果如下

JavaScript核心语法基础二-技术中文网

switch语句的case标号除了可以用数值外,也可以使用字符串,具体实例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function changecolor(){
				x = document.getElementById("getcolor").value;
				switch(x){
					case "red":
					y = "#FF0000";
					break;
					case "green":
					y = "#00FF00";
					break;
					case "blue":
					y = "#0000FF";
				}
				document.getElementById("show").style.color = y;
			}
		</script>
	</head>
	<body>
		<span id="show" style="{color: #000000;}">请选择颜色</span>
		<select id="getcolor" onchange="changecolor()">
			<option value="red">红色</option>
			<option value="green">绿色</option>
			<option value="blue">蓝色</option>
		</select>
	</body>
</html>

运行结果如下

JavaScript核心语法基础二-技术中文网
JavaScript核心语法基础二-技术中文网

3、for循环

for循环基本格式如下

for(初始化; 条件; 增量){
循环体
}

for循环执行步骤:

  • 第一步:执行初始化
  • 第二步:计算条件,若结果为true,则执行下一步,否则结束循环
  • 第三步:执行循环体
  • 第四步:执行增量操作,转到第二步

初始化操作可以放在for循环前面完成,增量部分可以放在循环体内完成,条件表达式应有计算结果为false的机会,否则构成“死循环”。

下面是一个利用for循环计算从1加到100,代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			var sum = 0;
			for(var i = 1; i <= 100; i++){
				sum += i;
			}
			document.write("1到100相加 = " + sum);
		</script>
	</body>
</html>

运行结果如下

JavaScript核心语法基础二-技术中文网

4、while循环

while循环基本语法格式如下:

while(条件){
循环体
}

while循环执行时首先计算条件,若结果为true,则执行循环体,否则结束循环。每次执行完循环体后,重新计算条件,下面使用while循环计算阶乘,实例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			var s = 1, n = 1, x = 5, y = 10;
			while(n <= x){
				s *= n
				n++
			}
			document.write(x + "!  =" + s);
			n = 1;
			while(n <= y){
				s *= n
				n++
			}
			document.write("<br />" + y + "!  =" + s);
		</script>
	</body>
</html>

运行结果如下

JavaScript核心语法基础二-技术中文网

5、do/while循环

do/while循环使while循环的变体,基本格式如下:

do{
循环体
}while(条件)

do/while循环与while循环类似,都是在条件为true时执行循环体,区别是while循环在一开始就测试条件,如果条件不为true,则一次也不执行循环。do/while循环在执行一次循环体后才测试条件,所以至少执行一次循环。

使用do/while循环计算阶乘,实例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			var s = 1, n = 1, x = 6, y = 11;
			do{
				s *= n
				n++
			}while(n <= x)
			document.write(x + "!  =" + s);
			n = 1;
			do{
				s *= n
				n++
			}while(n <= y)
			document.write("<br />" + y + "!  =" + s);
		</script>
	</body>
</html>

运行结果如下

JavaScript核心语法基础二-技术中文网

6、continue语句

continue语句用于终止本次循环,开始下一次循环,continue语句只能放在循环内部,在其他位置使用会出错,基本语法格式如下:

continue
continue 标号

不带标号的continue至作用于当前所在的循环,带标号时作用于标号处的循环

实例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			outloop:
			for(var i = 1; i < 10; i++){
				for(var j = 1; j < 10; j++){
					document.write(i + "×" + j + "=" + (i*j) + " ");
					if(j >= i){
						document.write("<br />")
						continue outloop;
					}
				}
			}
		</script>
	</body>
</html>

运行结果如下

JavaScript核心语法基础二-技术中文网

当continue用在while或do/while循环中时会转移到条件计算,然后在条件为true时开始下一次循环,否则结束循环。for循环中的continue会转移到增量部分,执行增量操作后在计算循环条件。

7、break语句

break基本格式如下:

break
break 标号

不带标号的break语句用于跳出循环或switch语句,并且必须放在循环或switch语句内部,否则会出错。
带标号的break语句,这种格式的标号标示的必须是一个封闭语句或代码块,例如循环、if语句或者大括号括起来的代码块等。用于跳出封闭语句或代码块,让程序流程转移到其后的语句。

输出100以内的素数(值不能被除数1和它本身之外的整数除的数),实例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			document.write("100以内的素数有:<br />");
			var count = 0, s = "";
			for(y = 2; y < 100; y++){
				for(x = 2; x < y; x++){
					if(y % x == 0){
						break;
					}
				}
				if(x == y){
					//将素数链接成字符串
					s = s + "&nbsp;&nbsp;" + y;
					//统计素数个数
					count++;
					if(count % 10 == 0){
						//添加换行符号
						s = s + "<br />";
					}
				}
			}
			document.write(s);
			document.write("<br />100以内的素数共有:" + count + "个");
		</script>
	</body>
</html>

运行结果如下

JavaScript核心语法基础二-技术中文网

到这里,JavaScript核心语法基础就结束了。