首页
所有分类
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类和继承 constructor属性
Mar 04 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
javascript操作css属性
Dec 30 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
全面解析Bootstrap表单使用方法（表单按钮）
Nov 24 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
简单实现js拖拽效果
Jul 25 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 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
mediapipe(1) for(1) while(1) 事件调度器(1) okenizer(1) sched(1) re模块(2) 无限迭代(1) 分词器(1) cvzone(1)
You might like
php自动注册登录验证机制实现代码
2011/12/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（六）
2014/06/23 PHP
php清空（删除）指定目录下的文件，不删除目录文件夹的实现代码
2014/09/04 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
基于JavaScript实现快速转换文本语言（繁体中文和简体中文）
2016/03/07 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
pymongo中group by的操作方法教程
2019/03/22 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
莫斯科绝对前卫最秘密的商店：SVMoscow
2017/10/23 全球购物
Zooplus罗马尼亚：宠物食品和配件
2019/11/02 全球购物
网络研修随笔感言
2014/02/17 职场文书
统计系教授推荐信
2014/02/28 职场文书
《三峡》教学反思
2014/03/01 职场文书
工程技术员岗位职责
2014/03/02 职场文书
小学生安全演讲稿
2014/04/25 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
初中优秀学生评语
2014/12/29 职场文书
个人委托书范文
2015/01/28 职场文书
关于召开会议的通知
2015/04/15 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis