首页
所有分类
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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
JS根据生日算年龄的方法
May 05 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
NTP(1) Quartz(1) HttpClient(1) RestTemplate(1) 反射(1) 注解(1) Hive(5) dataBinding(1) Windows Server 2022(3) ip2region(1)
You might like
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php中动态变量用法实例
2015/06/10 PHP
phpwind放自动注册方法
2006/12/02 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
js脚本实现数据去重
2014/11/27 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
Python的动态重新封装的教程
2015/04/11 Python
Python 探针的实现原理
2016/04/23 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
matplotlib源码解析标题实现(窗口标题，标题，子图标题不同之间的差异)
2021/02/22 Python
详解rem 适配布局
2018/10/31 HTML / CSS
巴西Bo.Bô官方在线商店：经营奢侈品时尚业务
2020/03/16 全球购物
美国轻奢时尚购物网站：REVOLVE（支持中文）
2020/07/18 全球购物
意大利包包和行李箱销售网站：Bagaglio.it
2021/03/02 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
校园达人秀策划书
2014/01/12 职场文书
大学毕业感言一句话
2014/02/06 职场文书
厂长岗位职责
2014/02/19 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
高考1977观后感
2015/06/04 职场文书
《社戏》教学反思
2016/02/22 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Spring Bean是如何初始化的详解
2022/03/22 Java/Android