第四节JavaScript 条件语句、循环语句、break与continue语句

一、JavaScript条件语句

在通常的代码中，我们有一些需要决定执行不同动作，这就可以在代码中使用条件语句来完成。

下面是我们常使用的条件语句：

if语句：只有当指定条件是true时，执行条件内代码。
if...else语句：当条件为true时执行代码，当条件为false时执行其它代码。
if...else if...else：使用该语句来选择多个代码块之一来执行。
switch：使用该语句来选择多个代码块之一来执行。

1 、if语句

只有当指定条件是true时，执行条件内代码。

语法：

复制代码

if（condition）{
	// 当条件为true时执行该区域代码
}

注意：请使用小写的if。如果使用了大写的IF会生成JavaScript错误。

实例：

复制代码

if（time < 20）{
x = "Good Day";
}

即：当time小于20时，才会运行"x = "Good Day";"代码。

2 、if....else语句

当条件为true时执行代码，当条件为false时执行其它代码。

语法：

复制代码

if（condition）{
	// 当条件为true时执行该区域代码
} else {
	//当条件不为true时执行该区域代码
}

实例：

复制代码

if (time<20) { 
  x="Good day"; 
} else { 
  x="Good evening"; 
}

即：当time小于20时，才会运行"x = "Good Day";"代码。当time不小于20时，会执行else中代码"x="Good evening";

"。

3 、if....else if....else语句

使用该语句来选择多个代码块之一来执行

语法：

复制代码

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

实例：

复制代码

if (time<10) { 
  document.write("<b>早上好</b>"); 
} else if (time>=10 && time<20) { 
  document.write("<b>今天好</b>"); 
} else { 
  document.write("<b>晚上好!</b>"); 
}

即：根据不同时间段，显示生成不同的问候语，当time小于10点之前，问候语时"早上好"，当time大于等于10 且小于20点时，问候语是"今天好"，当time大于等于20点时，问候语是"晚上好"。

5 、switch语句

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

语法：

复制代码

switch(n) {
 case 1: 
    // 执行代码块 1 
break; 
case 2: 
    // 执行代码块 2 
break; 
default: 
    // 非1和2时执行的代码 
}

注意：

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

实例：

复制代码

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击下面的按钮，会显示出基于今日日期的消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x;
	var d=new Date().getDay();
	switch (d)
    {
  		case 6:x="今天是星期六";
    	break;
  		case 0:x="今天是星期日";
    	break;
  		default:
    	x="期待周末";
  	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

二、JavaScript 循环

1 、for循环

循环可以使某代码块指定循环的次数。

说明：

平时如果我们想打印出cars数组中6个数字，这样可以写：

document.write(cars[0] + " ");

document.write(cars[1] + " ");

document.write(cars[2] + " ");

document.write(cars[3] + " ");

document.write(cars[4] + " ");

document.write(cars[5] + " ");

但是，你没发现这样写需要写跟多冗余代码，且不方便，那么我们可以用循环方式来写：

复制代码

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

从中可以看出，代码简洁了许多。

for 循环的语法：

for (语句 1; 语句 2; 语句 3)

{

被执行的代码块

}

说明：

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

实例：

复制代码

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

执行结果：

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4

从上述：

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件（i 必须小于 5）。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。

2 、for/in循环

for/in 语句循环遍历对象的属性：

复制代码

var person={fname:"Bill",lname:"Gates",age:56}; 
var txt = "";
for (x in person) {  // x 为属性名
    txt = txt + person[x];
}

输出结果：

BillGates56

说明：

循环遍历对象 "person" 的属性，根据x的属性名称，获取该名称对应的内容，并赋值。

3 、while循环

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

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

语法：

while (条件 )
{
需要执行的代码
}

实例：

复制代码

while (i<5) {
    x=x + "The number is " + i + "<br>";
    i++;
}

执行结果：

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4

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

4 、do/while循环

do/while 循环是 while 循环的变体。

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

语法：

do {
需要执行的代码
}
while (条件);

实例：

复制代码

do {
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

执行结果：

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4

三、break与continue语句

break 语句用于跳出循环。

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

1 、break语句

实例：

复制代码

for (i=0;i<10;i++) {
    if (i==3)  {
        break;
    }
    x=x + "The number is " + i + "<br>";
}

执行结果：

该数字为 0
该数字为 1
该数字为 2

说明：

如果上述实例中不加break语句，那么打印的结果就是0~9了，加上break之后，在i=3时触发break语句，跳出for循环，所以只打印到2就结束了。

2 、continue语句

实例：

复制代码

for (i=0;i<=10;i++) {
if (i==3) {
 continue;
}
   x=x + "The number is " + i + "<br>";
}

输出结果：

该数字为 0
该数字为 1
该数字为 2
该数字为 4
该数字为 5
该数字为 6
该数字为 7
该数字为 8
该数字为 9

说明：

从结果可以看出，只有i = 3时执行了continue语句，导致跳出了本次循环，但是又不影响下次继续循环。