讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
JavaScript提供了丰富的流程控制语句用于控制程序流程，比如：if、if else、while、for等等。在此介绍JavaScript中常用的流程控制语句。
if语句
if语句是编程语言中最常见最常用的语句，用于判断条件是否满足。请看如下示例：
<script type="text/javascript">
var number=9527;
if (number>5000) {
document.writeln("9527>5000");
}
</script>
输出结果如下：
9527>5000
if else语句
if else是JavaScript中非常基础和重要的条件判断结构，如下：
if(条件表达式){
如果该表达的结果true,那么程序执行该处代码语句
}else{
如果该表达的结果false,那么程序执行该处代码语句
}
我们来看一个非常简单的例子：需要根据用户的输入的年纪而做出不同的响应，这个该怎么做呢？请看如下代码：
<script type="text/javascript">
var age = prompt("请输入您的年纪");
age = parseInt(age);
if (age >= 18) {
document.write("您好，欢迎您的光临");
} else {
document.write("未满十八岁勿入!");
}
</script>
在该示例中，我们获取到用户输入的年纪，再依据年纪值是否小于18而显示不同的内容。
有时简单的if else不能满足实际的需要，此时可嵌套使用if else，其结构如下：
if(条件表达式){
如果条件表达式结果为true则执行该处代码，后面的代码不再执行
}else if(条件表达式){
如果条件表达式结果为true则执行该处代码，后面的代码不再执行
}else if(条件表达式){
如果条件表达式结果为true则执行该处代码，后面的代码不再执行
}else{
如果以上条件均不满足则执行该处代码
}
请看如下示例：
<script type="text/javascript">
var number=prompt("请问你有几个女朋友?");
number=parseInt(number);
if (number<0) {
document.write("严肃点，我们这搞社会调查呢");
}else if(number==0){
document.write("单身狗，不要哭；妹子会有的");
}else if(number>0&&number<2){
document.write("祝福你和你的女朋友");
}else{
document.write("哥们，你不止一个女朋友啊；分我一个呗！");
}
</script>
在此利用if else语句的嵌套依据用户输入值的不同做出相应的响应
switch语句
switch语句用于基于不同的条件来执行不同的动作。
switch语句结构如下：
switch(m){
case n1:
执行代码块 n1
break;
case n2:
执行代码块 n2
break;
default:
m与case n1和case n2都不同时执行的代码块
}
请看如下示例：
<script type="text/javascript">
var name=prompt("请输入你最喜欢的电影明星");
switch(name){
case "范冰冰":
document.write("范冰冰很漂亮喔"+"<br>");
break;
case "杨幂":
document.write("杨幂是个大美女"+"<br>");
break;
case "陈数":
document.write("陈数演技很高"+"<br>");
break;
case "李冰冰":
document.write("李冰冰气质很好"+"<br>");
break;
default:
document.write("请您输入其他明星"+"<br>");
break;
}
</script>
使用switch语句时请注意：switch语句后的变量数据类型必须和case后的数据类型保持一致。
while循环
while语句常用于执行循环操作，其结构如下：
while(条件表达式){
当条件表达式结果为true就一直执行while循环体内的代码。
当条件表达式的结果为false时while循环不再执行。
}
请看如下示例
<script type="text/javascript">
var i=1;
while(i<5){
document.write("i="+i+"<br>");
i++;
}
</script>
结果为：
i=1
i=2
i=3
i=4
在该示例中只要i的值小于5就一直执行while中的操作，当i不再小于5时则跳出循环
do while循环
do while语句常用于执行循环操作，其结构如下：
do{
循环代码;
}
wile(条件表达式)
do wile的基本原理和while基本一致，但是它保证循环体至少被执行一次。因为它是先执行代码然后再判断条件。
请看如下示例：
<script type="text/javascript">
var i=1;
do{
document.write("i="+i+"<br>");
i++;
}
while(i!=3)
</script>
结果为：
i=1
i=2
在该示例中首先会去执行do中的语句，然后再判断是否满足while条件；如果满足则继续执行do中的语句，如果不满足则跳出循环。
for循环
for语句常用于执行循环操作，其结构如下：
for (初始化;条件;增量){
循环执行的代码;
}
请看如下示例:
<script type="text/javascript">
for(var i=0;i<5;i++){
document.write("i="+i+"<br>");
}
</script>
结果为：
i=0
i=1
i=2
i=3
i=4
从这个例子我们可以看到for循环的执行顺序：
- 首先进行变量初始化并进行循环条件判断
- 若判断结果为true则执行循环体内的代码然后执行i++
- 继续判断循环条件，若为true则继续执行循环体内代码，否则跳出循环
break语句
break用于结束当前循环然后执行循环体之后的代码。
请看如下示例:
<script type="text/javascript">
for(var i=0;i<5;i++){
document.write("i="+i+"<br>");
if (i==2) {
break;
};
}
document.write("for循环已经中止"+"<br>");
</script>
结果为：
i=0
i=1
i=2
continue语句
continue表示跳出本次循环，该continue语句后面的代码不再执行；但是整个循环体继续执行
请看如下示例:
<script type="text/javascript">
for(var i=0;i<5;i++){
if (i==2) {
continue;
};
document.write("i="+i+"<br>");
}
document.write("for循环执行完毕"+"<br>");
</script>
结果为：
i=0
i=1
i=3
i=4
for循环执行完毕
自增和自减
在编程中常用到变量的自增和自减，比如i++和++i以及i- -和- -i
在此以i++和++i为例，分情况对其进行详细介绍；i- -和- -i与此类似，不再赘述。
第一种情况
如果变量i没有直接参与运算中，i++和++i表示的含义是：在变量原来的基础上加1
请看如下两个小示例：
<script type="text/javascript">
var number=9527;
number++;
document.write("number="+number+"<br>");
</script>
结果为：
number=9528
<script type="text/javascript">
var number=9527;
++number;
document.write("number="+number+"<br>");
</script>
结果为：
number=9528
第二种情况
如果i++或者++i参与到运算中，那么i++表示先将i的值赋值给其他变量然后再自加1；++i表示先将i的值加1然后再赋值给其他变量
请看如下两个小示例：
<script type="text/javascript">
var number=9527;
var score=number++;
document.write("score="+score+"<br>");
document.write("number="+number+"<br>");
</script>
结果为：
score=9527
number=9528
<script type="text/javascript">
var number=9527;
var score=++number;
document.write("score="+score+"<br>");
document.write("number="+number+"<br>");
</script>
结果为：
score=9528
number=9528
异常捕获
与java类似，在JavaScript中也有try{ }catch{ }finally{ }的异常处理机制。请看如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>error</title>
<style type="text/css">
p {
font: normal 25px "微软雅黑";
color: red;
}
</style>
</head>
<body>
<p>本文作者：谷哥的小弟</p>
<p>博客地址：http://blog.csdn.net/lfdfhl</p>
<script type="text/javascript">
try {
for (var i = 0; i < 5; i++) {
document.writeln(i + "<br>");
if (i == 3) {
throw new Error("错误信息i=3");
}
}
} catch (e) {
document.writeln(e.message + "<br>");
} finally {
document.writeln("请您稍后重试");
}
</script>
</body>
</html>
在该实例中当i等于3时抛出异常，此时catch捕获到该异常，最终执行finally语句块。
输出结果如下：
JavaScript异常捕获机制小结：
-
JavaScript中通过throw抛出异常
-
JavaScript中异常全部是Error对象；所以，try块后只能存在一个catch块
-
JavaScript是弱类型语言；所以，catch语句后的括号里的异常示例无须声明类型
综合示例
请在网页上打印显示九九乘法表。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
table {
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 3px 6px;
}
</style>
</head>
<body>
<div id="table"></div>
<script>
var str = '<table>';
for (var i = 1; i < 10; ++i) {
str += '<tr>';
for (var j = 1; j <= i; ++j) {
str += '<td>' + j + '×' + i + '=' + (j * i) + '</td>';
}
str += '</tr>';
}
str += '</table>';
document.getElementById('table').innerHTML = str;
</script>
</body>
</html>
效果如下：
至此，关于JavaScript中常用的流程控制语句就已介绍完毕。
转载：https://blog.csdn.net/lfdfhl/article/details/100675562