本文详细介绍JavaScript中的流程控制语句，涵盖条件选择（if、switch）、循环结构（for、while）以及控制跳转（break、continue、with）。通过具体代码示例解析各语句的执行逻辑与适用场景，帮助开发者掌握JS核心控制流。
JavaScript流程控制概述
JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看 一下这些语句。顺序结构我们在这里就不再提到，直接说条件和循环以及其他语句。 一、条件选择结构 条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的 动作，可以在代码中使用条件语句来完成该任务。 在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语句：用于根据表达式的值，从多个代码块中选择一个执行。它适用于基于不同条件执行不同动作的场景。
<!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关键字的使用：当switch表达式不匹配任何case值时，执行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的情况），继续执行后续代码。因此，输出结果中缺少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);
运行结果展示如下：
本文从条件选择、循环结构及其他语句三个方面介绍了JavaScript的流程控制语句。希望读者仔细阅读并熟练掌握这些语句的使用方法。