javascript中有哪些流程控制语句

下面复制于网络,详细讲解javascript中的各种控制结构。

一、条件选择结构

条件选择语句用于基于不同的条件来执行不同的动作,通常在写代码时,总是需要为不同的决定来执行不同的

动作,可以在代码中使用条件语句来完成该任务。

在JavaScript中,我们可使用以下条件语句:

if 语句:只有当指定条件为true时,使用该语句来执行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 20:00,会获得问候 "Good day"。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">

var time=new Date().getHours();

document.write("当前北京时间:"+time);

function myFunction()

{

var x="";

if (time<20)

{

x="Good day";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

运行的结果为:

if...else语句:当条件为true时执行代码,当条件为 false 时执行其他代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 20:00,会获得问候 "Good day"。如果时间晚于 20:00,会获得问候 "Good evening"。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">

var time=new Date().getHours();

document.write("当前北京时间:"+time);

function myFunction()

{

var x="";

if (time<20)

{

x="Good day";

}

else

{

x="Good evening";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

运行的结果为:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS流程控制语句</title>

</head>

<body>

<p>如果时间早于 10:00,会获得问候 "Good morning"。</p>

<p>如果时间早于 20:00,会获得问候 "Good day"。</p>

<p>如果时间晚于 20:00,会获得问候 "Good evening"。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">

var time=new Date().getHours();

document.write("当前北京时间:"+time);

function myFunction()

{

var x="";

if (time<10)

{

x="Good morning";

}

else if (time<20)

{

x="Good day";

}

else

{

x="Good evening";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

运行的结果为:

switch语句: 使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS流程控制语句2</title>

</head>

<body>

<p>点击下面的按钮来显示今天是周几:</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">

var d=new Date().getDay();

document.write("今天的星期代表数字:"+d);

function myFunction()

{ var x;

switch (d)

{

case 0:

x="Today it's Sunday";

break;

case 1:

x="Today it's Monday";

break;

case 2:

x="Today it's Tuesday";

break;

case 3:

x="Today it's Wednesday";

break;

case 4:

x="Today it's Thursday";

break;

case 5:

x="Today it's Friday";

break;

case 6:

x="Today it's Saturday";

break;

}

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

运行的结果:

default关键字的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS流程控制语句2</title>

</head>

<body>

<p>点击下面的按钮来显示今天是周几:</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script type="text/javascript">

var d=new Date().getDay();

document.write("今天的星期代表数字:"+d);

function myFunction()

{ var x;

switch (d)

{

case 6:

x="Today it's Saturday";

break;

case 0:

x="Today it's Sunday";

break;

default:

x="Looking forward to the Weekend";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

运行的结果为:

二、循环结构

循环可以将代码块执行指定的次数。

JavaScript支持不同类型的循环:

(1)for语句:循环代码块一定的次数

for(var box=1;box<=10;box++)

{

document.write("box="+box+"<br/>");

}

运行的结果为:

(2)for...in语句: 循环遍历对象的属性

var box={

name:"张三",

age:24,

sex:"男"

};

for(x in box)

{

document.write(box[x]+"<br/>");

}

运行的结果为:

(3)while语句:当指定的条件为 true 时循环指定的代码块。先判断,再执行语句,这种比较实用。

var box=1;

while(box<=5)

{

document.write("box="+box+"<br/>");

box++;

}

运行的结果为:

(4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次,再判断

var box=1;

do{

document.write("box="+box+"<br/>");

box++;

}while(box<=10)

运行的结果为:

三、其他语句

(1)break语句:用于跳出循环。

for(var box=1;box<=10;box++)

{

if(box==5)

{

break;//强制退出整个循环

}

document.write("box="+box+"<br/>");

}

运行的结果为:

执行到第四次循环时不再继续执行,跳出了真个循环,,输出的少了box=5以后的循环。

(2)continue语句:用于跳过循环中的一个迭代。

for(var box=1;box<=10;box++)

{

if(box==5)

{

continue;//退出当前循环,还会继续执行后面的循环

}

document.write("box="+box+"<br/>");

}

运行的结果为:

执行到第四次循环时,跳出第五次循环,继续向下面执行,输出的少了box=5。

(3)with语句:将代码的作用域设置到一个特定的对象中

先来看一般我们是怎么样输出对象的属性的值的:

var box={

name:"张三",

age:24,

sex:"男"

};

var n=box.name;

var a=box.age;

var s=box.sex;

document.write(n+"<br/>");

document.write(a+"<br/>");

document.write(s);

运行的结果为:

改用with语句来写:

var box={

name:"张三",

age:24,

sex:"男"

};

with(box){

var n=name;

var a=age;

var s=sex;

};

document.write(n+"<br/>");

document.write(a+"<br/>");

document.write(s);