JavaScript基础-02-语句和循环（if语句，Switch语句，for循环，for/in，while循环，do/while，循环控制 break、continue、bresk）
文章目录
1. if 语句
- 语法
if (条件1)
{
代码块1;
}
else if (条件2)
{
代码块2;
}
else
{
命令n;
}
- 示例
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
document.write("<b>下午好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
</script>
</body>
</html>
2. switch语句
- 语法
switch(n)
{
case 1:
执行代码块 1;
break;
case 2:
执行代码块 2;
break;
default:
与 case 1 和 case 2 不同时执行的代码;
}
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</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 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
3. for循环
3.1 基本应用
- 语法
for (var i=0;i<5;i++){
执行代码块;
}
- 示例，循环打印数组
name=["刘备","关羽","张飞","赵云"];
for (var i=0,l=name.length; i<l; i++){
document.write(name[i] + "<br>");
}
或者
name=["刘备","关羽","张飞","赵云"];
l=name.length;
for (var i=0, i<l; i++){
document.write(name[i] + "<br>");
}
还可以是
name=["刘备","关羽","张飞","赵云"];
l=name.length;
var i = 0;
for (;i<l;){
document.write(name[i] + "<br>");
i++;
}
3.2 for/in
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<button onclick="myFunction()">打印武将</button>
<p id="demo"></p>
<script>
function myFunction(){
var myList=new Array();
var result="";
myList = Array("关羽","张飞","赵云","马超","黄忠");
for (i in myList){
result = result + myList[i] + "<br>";
}
document.getElementById("demo").innerHTML=result;
}
</script>
</body>
</html>
- 显示结果
4. while 循环
4.1 while 循环
- 语法
while (条件){
执行代码块;
}
- 和for比较
while:
var x="",i=0;
while (i<5){
x=x + "该数字为 " + i + "<br>";
i++;
}
for：
var x="",i=0;
for (;i<5;){
x=x + "该数字为 " + i + "<br>";
i++;
}
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
while (i<5){
x=x + "该数字为 " + i + "<br>";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
4.2 do/while
- 语法
do
{
执行的代码
}
while (条件);
说明：先执行do，再判断while条件，如果满足再do
- 示例
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
5. 循环控制
5.1 break
立即跳出循环（循环不再执行）。
for (i=0;i<10;i++)
{
if (i==3) break; //if后执行代码块单行省略大括号
x=x + "The number is " + i + "<br>";
}
5.2 continue
跳出本次循环（跳过本次循环后边剩余代码），继续下次循环。
var x= "", i= 0;
while (i < 10){
if (i == 3){
i++; //加入i++不会进入死循环
continue;
}
x= x + "该数字为 " + i + "<br>";
i++;
}
5.3 bresk-跳出元素
给break加上标签，可以跳过其他元素。
- 语法
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<script>
names=["关羽","张飞","赵云","马超"];
list:{
document.write(names[0] + "<br>");
document.write(names[1] + "<br>");
document.write(names[2] + "<br>");
break list;
document.write(names[3] + "<br>");
document.write(names[4] + "<br>");
document.write(names[5] + "<br>");
}
</script>
</body>
</html>
