讲给后台程序员看的前端系列教程(31)——流程控制

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/lfdfhl/article/details/100675562

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给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=2i=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=2i=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中常用的流程控制语句就已介绍完毕。