下载掌阅APP，畅读海量书库
立即打开
|
4.1 if条件语句 |
本节介绍ECMAScript语法中最基本的if条件语句，if条件语句是使用频率最高的流程控制语句。对于if条件语句的语法形式有很多种，尤其是与else关键字配合起来使用，表现形式更为多样。
ECMAScript语法规范中定义的if语句是最基本的条件选择语句，相当于“如果…则…”的条件选择。
if条件语句的语法格式如下：
if(条件) {
仅当条件为 true 时，执行此处代码
}
下面来看一个使用if语句的代码示例（详见源代码ch04目录中ch0-js-if.html文件）。
【代码4-1】
01 <script type="text/javascript">
02 if(true) {
03 console.log("if(true) {");
04 console.log(" true");
05 console.log("}");
06 }
07 if(false)
08 console.log("if(false) {");
09 console.log(" false");
10 console.log("}");
11 </script>
关于【代码4-1】的分析如下：
第02～06行代码是第一个if语句块，主要是通过if语句判断“true”是否为真，如果为“真”则执行第03～05行代码控制输出调试信息；
第07～10行代码是意图模仿第02～06行代码的第二个if语句块，主要是通过if语句判断“false”是否为真，如果不为“真”则不执行第08～10行代码。读者可能注意到第07～10行代码中语句块没有“{}”符号，那么这个模仿的第二个if语句块会不会和第一个if语句块功能完全一样呢？
运行测试【代码4-1】所定义的HTML页面，并使用调试器查看控制台输出的调试信息，页面效果如图4.1所示。
图4.1 if语句
从图4.1可知，第02～06行代码的第一个if语句块输出的内容是符合预期的；而第07～10行代码的第二个if语句块输出的内容比较奇怪，原本由于if语句判断条件为布尔值（“fasle”）后不会得到任何输出，但第09～10行代码的内容却输出了，而第08行代码的内容却没有输出。这是由于第二个if语句块没有“{}”符号的缘故造成的，其默认只将第08行代码当作if语句块的语句体，而第09～10行代码不是其语句体，因此这两行代码的内容也就得到输出。
ECMAScript语法规范中定义的“if…else…”语句是对if语句的增强，相当于“如果…则…，否则…”条件选择。
if…else…语句的语法格式如下：
if (条件) {
仅当条件为 true 时，执行此处代码
} else {
否则执行此处代码
}
下面来看一个使用if…else…语句的代码示例（详见源代码ch04目录中ch04-js-if-else.html文件）。
【代码4-2】
01 <script type="text/javascript">
02 if(true) {
03 console.log("if(true) {");
04 console.log(" true");
05 console.log("}");
06 } else {
07 console.log("else {");
08 console.log(" false");
09 console.log("}");
10 }
11 if(false) {
12 console.log("if(true) {");
13 console.log(" true");
14 console.log("}");
15 } else {
16 console.log("else {");
17 console.log(" false");
18 console.log("}");
19 }
20 </script>
关于【代码4-2】的分析如下：
第02～10行代码是第一个if…else…语句块，主要是通过if语句判断“true”是否为真，如果为“真”则执行if语句块中的第03～05行的代码并在控制台中输出调试信息，否则执行else语句块内的第07～09行的代码并在控制台中输出调试信息；
第11～19行代码是第二个if…else…语句块，主要是通过if语句判断“false”是否为真，然后相应地执行if和else语句块内的代码。
页面效果如图4.2所示。对于if…else…条件选择语句，运行中只能执行if语句块或else语句块中的内容，二者不可能都执行，不过也不可能都不执行，这也正是if…else…条件选择语句的特点。
图4.2 if…else…语句
ECMAScript语法规范中定义的if…else if…else…语句是条件选择语句的最完整版本，相当于“如果…则…，如果…则…，否则…”条件选择，基本可以适用于编程中遇到的任何情况。
if…else if…else…语句的语法格式如下：
if (条件1) {
仅当条件1为 true 时，执行此处代码
} else if (条件2) {
仅当条件2为 true 时，执行此处代码
} … {
…
} else if (条件n) {
仅当条件n为 true 时，执行此处代码
} else {
否则执行此处代码
}
下面来看一个使用if…else if…else…语句的代码示例（详见源代码ch04目录中ch04-js-if-else-if.html文件）。
【代码4-3】
01 <script type="text/javascript">
02 if(true) {
03 console.log("1- if");
04 } else if (false) {
05 console.log("1- else if");
06 } else {
07 console.log("1- else");
08 }
09 if(false) {
10 console.log("2 - if");
11 } else if (true) {
12 console.log("2 - else if");
13 } else {
14 console.log("2 - else");
15 }
16 if(false) {
17 console.log("3 - if");
18 } else if (false) {
19 console.log("3 - else if");
20 } else {
21 console.log("3 - else");
22 }
23 </script>
关于【代码4-3】的分析如下：
这段代码主要使用了三段if…else if…else…语句块，分别用于演示if语句块、else if语句块和else语句块这三种不同的条件输出。
第02～08行代码是第一个if…else if…else…语句块，主要是通过if语句判断“true”是否为真，如果为“真”则执行if语句块中的第03行的代码并在控制台中输出调试信息，否则执行后面的语句；
第09～15行代码是第二个if…else if…else…语句块，主要是通过if语句判断“false”是否为真，如果不为“真”则继续通过else if语句判断“true”是否为真，如果为“真”则执行else if语句块中的第12行代码并在控制台输出调试信息，否则执行后面的语句；
第16～22行代码是第三个if…else if…else…语句块，主要是通过if语句判断“false”是否为真，如果不为“真”则继续通过else if语句判断“false”是否为真，如果不为“真”则执行else语句块中第21行的代码并在控制台输出调试信息。
页面效果如图4.3所示。对于if…else if…else…条件选择语句，运行中只能执行if语句块、else if语句块或else语句块中的内容，不可能全部都执行，不过也不可能都不执行，至少要执行一个语句块，这也同样是if…else if…else…条件选择语句的特点。
图4.3 if…else if…else…语句
else if语句块可以扩展为多项并列的形式，这样就可以适用于绝大多数的编程场景。当然，如果并列项太多可以使用下面我们将要介绍到的switch条件选择语句。