详解JavaScript的流程控制语句
2015-11-30 00:00
831 查看
JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看
一下这些语句。顺序结构我们在这里就不再提到，直接说条件和循环以及其他语句。
一、条件选择结构
条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的
动作，可以在代码中使用条件语句来完成该任务。
在JavaScript中，我们可使用以下条件语句：
if 语句：只有当指定条件为true时，使用该语句来执行代码
运行的结果为：
if...else语句：当条件为true时执行代码，当条件为 false 时执行其他代码
运行的结果为：
if...else if....else 语句：使用该语句来选择多个代码块之一来执行
运行的结果为：
switch语句： 使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作
运行的结果：
default关键字的使用
运行的结果为：
二、循环结构
循环可以将代码块执行指定的次数。
JavaScript支持不同类型的循环：
(1)for语句：循环代码块一定的次数
运行的结果为：
(2)for...in语句： 循环遍历对象的属性
运行的结果为：
(3)while语句：当指定的条件为 true 时循环指定的代码块。先判断，再执行语句，这种比较实用。
运行的结果为：
(4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次，再判断
运行的结果为：
三、其他语句
(1)break语句：用于跳出循环。
运行的结果为：
执行到第四次循环时不再继续执行，跳出了真个循环,，输出的少了box=5以后的循环。
(2)continue语句：用于跳过循环中的一个迭代。
运行的结果为：
执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了box=5。
(3)with语句：将代码的作用域设置到一个特定的对象中
先来看一般我们是怎么样输出对象的属性的值的：
运行的结果为：
改用with语句来写：
运行的结果为：
从三大方面介绍了JavaScript的流程控制语句，希望大家仔细阅读，数量掌握JavaScript流程控制语句的使用方法。
javascript while语句和do while语句的区别分析
JavaScript switch case 的用法实例[范围]
javascript 循环语句 while、do-while、for-in、for用法区别
javascript中break，continue和return语句用法小结
整理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);运行的结果为：
从三大方面介绍了JavaScript的流程控制语句，希望大家仔细阅读，数量掌握JavaScript流程控制语句的使用方法。
您可能感兴趣的文章:
JavaScript Break 和 Continue区别教程javascript while语句和do while语句的区别分析
JavaScript switch case 的用法实例[范围]
javascript 循环语句 while、do-while、for-in、for用法区别
javascript中break，continue和return语句用法小结
整理Javascript流程控制语句学习笔记
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript闭包(Closure)用法实例简析
- javascript针对cookie的基本操作实例详解
- javascript作用域链(Scope Chain)用法实例解析
- JavaScript基础篇（3)之Object、Function等引用类型
- javascript中eval和with用法实例总结
- 基于javascript如何传递特殊字符
- javascript for-in有序遍历json数据并探讨各个浏览器差异
- javascript编程异常处理实例小结
- JS简单模拟触发按钮点击功能的方法
- 基于javascript实现浏览器滚动条快到底部时自动加载数据
- 导航栏二级下拉菜单的js特效
- js寄生组合式继承
- Javascript 面向对象编程（一）：封装
- js第三方插件(消息 图形)
- 我的第一个jsp程序-实现注册登录留言功能
- JS 之 验证日期格式
- JS 之 验证电话号码
- JS版本＿贪吃蛇
- 初学JSON
- javascript权威指南学习笔记(三)