首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解JavaScript的流程控制语句

Posted in Javascript onNovember 30, 2015

 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>

       运行的结果为：

详解JavaScript的流程控制语句

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>

       运行的结果为：

详解JavaScript的流程控制语句

 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>

       运行的结果为：

 详解JavaScript的流程控制语句

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>

       运行的结果：

详解JavaScript的流程控制语句

 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的流程控制语句

二、循环结构
      循环可以将代码块执行指定的次数。
      JavaScript支持不同类型的循环：
(1)for语句：循环代码块一定的次数

for(var box=1;box<=10;box++) 
{ 
 document.write("box="+box+"<br/>"); 
}

      运行的结果为：

详解JavaScript的流程控制语句

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

var box={ 
 name:"张三", 
 age:24, 
 sex:"男" 
 }; 
for(x in box) 
{ 
 document.write(box[x]+"<br/>"); 
}

运行的结果为：

详解JavaScript的流程控制语句

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

var box=1; 
while(box<=5) 
{ 
 document.write("box="+box+"<br/>"); 
 box++; 
}

      运行的结果为：

详解JavaScript的流程控制语句

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

var box=1; 
do{ 
 document.write("box="+box+"<br/>"); 
 box++; 
}while(box<=10)

      运行的结果为：

详解JavaScript的流程控制语句

三、其他语句
(1)break语句：用于跳出循环。

for(var box=1;box<=10;box++) 
 { 
 if(box==5) 
 { 
 break;//强制退出整个循环 
 } 
 document.write("box="+box+"<br/>"); 
 }

运行的结果为：

详解JavaScript的流程控制语句

      执行到第四次循环时不再继续执行，跳出了真个循环,，输出的少了box=5以后的循环。
(2)continue语句：用于跳过循环中的一个迭代。

for(var box=1;box<=10;box++) 
{ 
 if(box==5) 
 { 
 continue;//退出当前循环，还会继续执行后面的循环 
 } 
 document.write("box="+box+"<br/>"); 
}

运行的结果为：

详解JavaScript的流程控制语句

执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了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);

      运行的结果为：

详解JavaScript的流程控制语句

      改用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流程控制语句的使用方法。

详解JavaScript的流程控制语句

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javascript密码强度校验代码（两种方法）
Aug 10 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
详解JavaScript的表达式与运算符
Nov 30 #Javascript
Bootstrap每天必学之进度条
Nov 30 #Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 #Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 #Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 #Javascript
整理Javascript流程控制语句学习笔记
Nov 29 #Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 #Javascript
矩阵(1) agg(1) GUI(2) pandas(7) mp3Play(1) 音频(1) Pool(1) 数据处理(2) apply(1) Tkinter(4)
You might like
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP常用技巧总结（附函数代码）
2012/02/04 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
C语言面试题
2015/10/30 面试题
Sony C++笔试题
2013/03/10 面试题
DataList 能否分页，请问如何实现？
2015/05/03 面试题
药学专业毕业生求职信
2013/10/20 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
办理生育手续介绍信
2014/01/14 职场文书
英语简历自我评价
2014/01/26 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书