流程控制,是任何一门编程语言都有的一个语法。
如果你学习C语言,或者学过C#、Java等,应该对“流程控制”很熟悉。
所谓的流程控制,指的是控制程序按照怎样的顺序执行。
在JavaScript中,共有三种流程控制方式(其实任何语言也都只有这三种啦)。
顺序结构
选择结构
循环结构
顺序结构
在JavaScript中,顺序结构是最基本的结构。所谓顺序结构,
就是代码按照从上到下、从左到右的“顺序”执行,
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var str1 = "绿叶学习网";
var str2 = "JavaScript";
var str3 = str1 + str2;
document.write(str3);
</script>
</head>
<body>
</body>
</html>
分析:
按照“从上到下、从左到右”的顺序,JavaScript执行顺序如下。
第一步:执行var str1 = "绿叶学习网”
第二步:执行var str2 = “JavaScript”
第三步:执行var str3 = str1 + str2
第四步:执行document.write(str3)
JavaScript一般情况下就是按照顺序结构来执行的。不过呢,在有些场合,我们单纯只用顺序结构就没法解决问题了。此时就需要引入选择结构和循环结构。
选择结构
在JavaScript中,选择结构指的是根据“条件判断”来决定使用哪一段代码。选择结构有单向选择、双向选择以及多向选择三种,但是无论是哪一种,JavaScript都只会执行其中的一个分支,选择结构流程如图3-3所示。
循环结构
循环结构,指的是根据条件来判断是否重复执行某一段程序。若条件为true,则继续循环;若条件为false,则退出循环。
选择结构:if
在JavaScript中,选择结构指的是根据“条件判断”来决定使用哪一段代码。
选择结构有单向选择、双向选择以及多向选择三种,但不管是哪一种,JavaScript只会执行其中的一个分支。
在JavaScript中,选择结构共有两种方式,一种是if语句,
另外一种是switch语句。这一节我们先来介绍if语句。对于if语句,主要包括以下几种。
单向选择:if…
双向选择:if…else…
多向选择:if…else if…else…
if语句的嵌套
单向选择:if…
语法:
if(条件)
{
…
}
说明:
这个“条件”一般是一个比较表达式。如果“条件”返回为true,则会执行“{}”内部的程序;如果“条件”返回为false,则会直接跳过“{}”内部的程序,然后按照顺序来执行后面的程序。
在JavaScript中,由“{}”括起来的程序,我们称为“语句块”。语句块常用于选择结构、循环结构以及函数体中,JavaScript把一个语句块看成是一个整体来执行。
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var score = 100;
if (score > 60) {
alert("那你很棒棒噢~");
}
</script>
</head>
<body>
</body>
</html>
分析:
由于变量score的值为100,所以score>60返回true,因此会执行“{}”内部的程序。
双向选择:if…else…
语法:
if(条件)
{
……
}
else
{
……
}
说明:
“if…else…”相对“if…”来说,仅仅是多了一个选择。当条件返回为true时,会执行if后面“{}”中的程序;当条件返回为false时,会执行else后面“{}”中的程序。
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var score = 100;
if (score < 60) {
alert("补考!");
} else {
alert("通过!");
}
</script>
</head>
<body>
</body>
</html>
分析:
由于变量score的值为100,而score<60返回false,因此会执行else后面“{}”中的程序。
对于双向选择,我们是可以使用三目运算符来代替的,像上面这个例子,如果用三目运算符来写,实现代码如下。
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var score = 100;
var result = (score < 60) ? "补考!" : "通过!";
alert(result);
</script>
</head>
<body>
</body>
</html>
多向选择:if…else if…else…
多向选择,就是在双向选择的基础上增加多个选择分支。
语法:
if(条件1)
{
//当条件1为true时执行的代码
}
else if(条件2)
{
//当条件2为true时执行的代码
}
else
{
//当条件1和条件2都为false时执行的代码;
}
说明:
多向选择语法看似很复杂,实质也是非常简单的,它只是在双向选择基础上再增加一个或多个选择分支罢了。小伙伴们对比一下这两个的语法格式就知道了。
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var time = 21;
if (time < 12)
{
document.write("早上好!");//如果小时数小于12则输出“早上好!”
}
else if (time > =12 && time < 18)
{
document.write("下午好!"); //如果小时数大于等于12并且小于18,输出“下午好!”
}
else
{
document.write("晚上好!"); //如果上面两个条件都不符合,则输出“晚上好!”
}
</script>
</head>
<body>
</body>
</html>
分析:
对于多向选择,我们会从第一个if开始判断,如果第一个if条件不满足,则判断第二个if条件……直到满足为止。一旦满足,就会退出整个if结构。
if语句的嵌套
在JavaScript中,if语句是可以嵌套使用的。
语法:
if(条件1)
{
if(条件2)
{
当“条件1”和“条件2”都为true时执行的代码
}
else
{
当“条件1”为true、“条件2”为false时执行的代码
}
}
else
{
if(条件2)
{
当“条件1”为false、“条件2”为true时执行的代码
}
else
{
当“条件1”和“条件2”都为false时执行的代码
}
}
说明:
对于这种结构,我们不需要去刻意去记,只需要从外到内根据条件一个个去判断就可以了。
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var gendar = "女";
var height = 172;
if(gendar=="男")
{
if(height>170)
{
document.write("高个子男生");
}
else
{
document.write("矮个子男生");
}
}
else
{
if (height > 170)
{
document.write("高个子女生");
}
else
{
document.write("矮个子女生");
}
}
</script>
</head>
<body>
</body>
</html>
分析:
在这个例子中,首先外层if语句的判断条件gendar=="男"返回false,因此会执行else语句。然后我们可以看到else语句内部还有一个if语句,这个内层if语句的判断条件height>170返回true,所以最终输出内容为“高个子女生”。
实际上,if语句的嵌套也是很好理解的,说白了就是在if或else后面的“{}”内部再增加一层判断。对于if语句的嵌套,我们一层一层由外到内判断就可以了,就像剥洋葱一样,非常简单。我们再来一个例子,让小伙伴消化一下。
举例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var x = 4;
var y = 8;
if (x < 5)
{
if (y < 5)
{
document.write("x小于5,y小于5");
}
else
{
document.write("x小于5,y大于5");
}
}
else
{
if (y < 5)
{
document.write("x大于5,y小于5");
}
else
{
document.write("x大于5,y大于5");
}
}
</script>
</head>
<body>
</body>
</html>