首页
所有分类
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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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
XDM(3) Kotlin(1) 验证表达式(1) gRPC(3) 继承(1) redis(3) AOP(2) PyAutoGUI(1) promise(2) 构造函数(1)
You might like
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python放大图片和画方格实现算法
2018/03/30 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python监控nginx端口和进程状态
2019/09/06 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
python Timer 类使用介绍
2020/12/28 Python
ECHT官方网站：男女健身服
2020/02/14 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
毕业生的自我鉴定
2013/10/29 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
党员对照检查材料
2014/09/22 职场文书
钳工实训报告总结
2014/11/04 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android