第3章控 制 语 句
在JavaScript中，逻辑控制语句用于控制程序的执行顺序，分为条件结构和循环结构。
3.1条 件 语 句
JavaScript条件判断语句主要包括if语句、ifelse语句、ifelse ifelse语句和switch语句。
1. if语句
if语句是最简单的条件判断语句。
语法格式如下。
if(表达式){
//JavaScript语句;
}
表达式返回布尔值，当值是true时，执行JavaScript语句，否则跳过JavaScript语句继续向下执行。
【例31】 if条件判断。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var password = "hello";
if (password.length < 6) {
alert("密码长度不足6位，请重新设置!");
}
</script>
</body>
</html>
运行结果如图31所示。
图31if语句运行结果
代码分析：
alert()方法用于显示带有一条指定消息和一个确认按钮的对话框。
password.length < 6判断password字符串的长度是否小于6位，当长度小于6位时，执行alert()方法，弹出对话框。
2. ifelse语句
ifelse语句比if语句多一种情况。
语法格式如下。
if(表达式){
//JavaScript语句1
}
else{
//JavaScript语句2
}
表达式返回值为true时，执行JavaScript语句1； 否则执行JavaScript语句2。
【例32】ifelse条件判断。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var score = prompt("请输入你的成绩：");
if (score >= 60) {
alert("恭喜你!成功通过了考试!");
} else {
alert("很遗憾，继续努力!");
}
</script>
</body>
</html>
运行结果如图32所示。
图32ifelse条件判断运行过程
代码分析：
prompt()方法会弹出一个提示框，用于等待用户输入的数据，返回值类型为字符型。当score >= 60进行比较运算时，字符数据先自动转换成数字，然后跟60比较。如果返回值是true，则对话框中显示“恭喜你！成功通过了考试！”； 否则显示“很遗憾，继续努力！”。
3. ifelse ifelse语句
ifelse ifelse语句用于需要判断多个条件的情况，每个条件对应一段程序。
语法格式如下。
if(表达式1){
//JavaScript语句1
}
else if(表达式2){
//JavaScript语句2
}
else if
...
else{
//JavaScript语句n
}
ifelse ifelse语句首先会执行表达式1，如果表达式1返回true，执行JavaScript语句1，然后直接跳出这个条件结构，JavaScript语句2~JavaScript语句n等都不会被执行。如果表达式1返回false，表达式2将会被判断。以此类推，表达式1~表达式n-1都返回false时，执行else后的JavaScript语句n。
【例33】使用ifelse ifelse语句实现将百分制成绩转换为五级制成绩，即成绩>=90： 优秀； 成绩>=80： 良好； 成绩>=70： 中等； 成绩>=60： 及格； 成绩<60： 不及格。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var score = prompt("请输入你的成绩");
if (score >= 90) {
document.write("<h2>你的成绩是:优秀</h2>");
} else if (score >= 80) {
document.write("<h2>你的成绩是:良好</h2>");
} else if (score >= 70) {
document.write("<h2>你的成绩是:中等</h2>");
} else if (score >= 60) {
document.write("<h2>你的成绩是:及格</h2>");
} else {
document.write("<h2>你的成绩是:不及格</h2>");
}
</script>
</body>
</html>
运行结果如图33所示。
图33百分制成绩转换为五级制成绩
4. switch语句
switch语句将表达式与一组数据进行比较，当表达式与所列数据相等时，执行相应的代码块。
语法格式如下。
switch (表达式) {
case 常量1:
//JavaScript语句1;
break;
case 常量2:
//JavaScript语句2;
break;
...
default:
默认语句;
}
当判断条件多于3个时，就可以使用switch语句，这样可以使程序的结构更加清晰。switch语句根据一个变量的不同取值执行不同的语句。在执行switch语句时，表达式将从上往下与每个case语句后的常量做比较。如果相等，则执行该case语句后的JavaScript语句，如果没有一个case语句的常量与表达式的值相等，则执行默认语句。
【例34】 使用switch语句进行判断。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var weekday = prompt("请输入今天是星期几");
switch (weekday) {
case "星期一":
document.write("周一，新的开始...");
break;
case "星期二":
case "星期三":
case "星期四":
document.write("离周末还有好多天，好好努力吧!");
break;
case "星期五":
document.write("终于到周末了!");
break;
default:
document.write("你输入的是星期几？");
break;
}
</script>
</body>
</html>
运行结果如图34所示。
图34使用switch语句判断
代码分析：
switch语句中用于判断的表达式的值可以是数值、布尔值和字符串。本实例中用于判断的表达式是字符串类型。
根据判断执行相应的case语句块，如果代码中有break语句则跳出switch语句，如果没有则顺序执行下一个case语句块。本实例中，如果输入的是“星期二”，则会顺序执行“星期二”“星期三”“星期四”对应的语句块，输出“离周末还有好多天，好好努力吧！”后，执行break语句跳出switch语句。
3.2循 环 语 句
JavaScript中的循环控制语句主要包括while循环、dowhile循环、for循环、forin循环以及特殊命令break、continue。
1. while循环
语法格式如下。
while(条件)
{
//JavaScript语句;
}
while循环语句的特点是先判断后执行，当条件为真时，就执行JavaScript语句； 相反，当条件为假时，则退出循环。
【例35】 使用while语句输出递增的数字序列。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var i = 1;
while (i <= 10) {
document.write(i + " ");
i++;
}
</script>
</body>
</html>
运行结果如图35所示。
图35while循环
代码分析：
示例中定义的i是循环变量，初始值为1，每次执行完循环体，i的值加1，直到i的值大于10才结束循环。
2. dowhile循环
语法格式如下。
do {
//JavaScript语句;
}while(条件);
dowhile循环语句表示反复执行JavaScript语句，直到条件为假时才退出循环，与while循环语句的区别在于，dowhile循环语句先执行后判断。
【例36】 使用dowhile语句输出递增的数字序列。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var i = 1;
do {
document.write(i + " ");
i++;
} while (i <= 10)
</script>
</body>
</html>
运行结果如图36所示，与while循环的输出结果是一致的。
图36dowhile循环
代码分析：
例36的运行结果与例35是一致的，但dowhile循环与while循环的区别是先执行再判断，这就意味着不管条件是否符合，dowhile循环至少执行一次。
3. for循环
语法格式如下。
for(初始化;条件;增量)
{
//JavaScript语句;
}
其中，初始化参数设置循环变量的初始值； 条件是用于判断循环终止时的条件，若满足条件，则继续执行循环体中的语句，否则跳出循环； 增量或减量用于定义循环控制变量在每次循环时如何变化。在3个条件之间，必须使用分号(；)隔开。
【例37】 使用for循环遍历数组元素。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var colors = new Array("yellow", "green", "blue", "red", "orange");
for (var i = 0; i < colors.length; i++) {
document.write(colors［i］ + "<br/>");
}
</script>
</body>
</html>
运行结果如图37所示。
图37for循环遍历数组
代码分析：
示例中循环控制变量i初始值为0，循环条件是小于数组的长度，增量自动累加1，这样通过for循环遍历访问了数组中的每个元素。
4. forin循环
forin循环常用于数组或对象的遍历。
语法格式如下。
for(变量 in 对象){
//JavaScript语句;
}
其中，“变量”可以是数组元素，也可以是对象。
【例38】使用forin循环遍历数组元素。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var colors = new Array("yellow", "green", "blue", "red", "orange");
for (var i in colors) {
document.write(colors［i］ + "<br/>");
}
</script>
</body>
</html>
运行结果与例37相同，如图38所示。
图38forin循环遍历数组
【例39】使用forin遍历JS对象。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
var student = {
name: "张三",
sex: "男",
age: 21,
phone: "13857474113"
};
for (key in student) { //获取对象的属性名并保存到变量key中
document.write(key + " : " + student［key］ + "<br/>");
}
</script>
</body>
</html>
运行结果如图39所示。
图39forin循环遍历JS对象
代码分析：
JSON是一种轻量级的数据交换格式。JSON对象由“键(key)/值(value)”对组成，例39中的student是类似于JSON的JS对象。
在forin循环中，key遍历student对象中所有属性，并通过属性名输出对应的属性值。
5. 中断循环
在JavaScript中，有两个特殊的语句用于在循环内部中断循环： break和continue。
（1） break： 立即退出整个循环。
（2） continue： 只退出当前循环，根据判断条件来判断是否进入下一次循环。
【例310】 break、continue中断循环。
参考代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title></head>
<body>
<script type="text/javascript">
document.write("break中断操作：<br/>");
for (var i = 0; i < 5; i++) {
if (i == 2) {
break;
}
document.write("数字是：" + i + "<br/>");
}
document.write("<hr/>");
document.write("continue中断操作：<br/>");
for (var i = 0; i < 5; i++) {
if (i == 2) {
continue;
}
document.write("数字是：" + i + "<br/>");
}
</script>
</body>
</html>
运行结果如图310所示。
图310break、continue中断循环