一、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] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
但是,你没发现这样写需要写跟多冗余代码,且不方便,那么我们可以用循环方式来写:
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语句,导致跳出了本次循环,但是又不影响下次继续循环。