web开发学习日志4-if...else

学到了Javascript条件语句部分，对大部分人来说是块硬骨头，我上学的时候在计算机课有接触，当时似懂非懂的蒙混过关，但在内心深处一直对条件语句有恐惧。这次重新拾起这部分内容仍然是困难重重，通过一个下午地钻研，算是入门了。在今天的学习日志里，我尝试着把条件语句讲清楚。

为什么条件语句学不好

• 对条件语句的规则不清晰
• 条件增多时逻辑混乱，无从下手

规则

if...else语句

根据是否满足一定的条件而执行特定的代码，代码结构如下：

if (/* 如果条件1为true */) {
// 运行代码1
} else {
// 运行代码2
}

注意：

if 语句中的值始终转换为 true 或 false。根据该值，if 语句中的代码会运行（true），或 else 语句中的代码会运行（false）。if 和 else 语句中的代码位于花括号 {...} 里，以便区分条件，并表明要运行哪段代码。

else if 语句

在某些情况下两个条件语句（非此即彼）并不够用，可以想象以下场景：

• 如果在餐馆消费大于100元且点菜品A，会赠送饮料一瓶
• 如果消费大于100元但没点菜品A，会赠送小菜一碟
• 如果消费小于100元，没有赠品

当出现上述这种情况时，需要引入else if语句，增加条件，代码结构如下：

if (/* 如果条件1为true */) {
// 运行代码1
} else if (/* 如果条件2为true */) {
// 运行代码2
... ...
} else {
// 运行代码n
}

注意：

通过额外添加一个 else if 语句，就增加了一个条件语句。如果条件1为false，代码就会跳到 else if 语句，看看条件2。 如果条件2仍为false，代码就会跳到else 语句。本质上 else 语句充当的是默认条件，以防所有其他 if 语句都为 false。

逻辑

在编程语言里，逻辑就是一系列判断条件（true或者false（Yes或者No））的顺序。为了解决问题，需要理清各个条件之间的逻辑关系，通过流程图可以清晰展示：

流程图是一种图表，通过一系列的逻辑语句概述了问题的解决方案。这些语句的评估和执行顺序叫做控制流程。

下面的例子展示了银行卡余额查询程序从流程图到代码实现的整个过程，

要实现的方案：

1）是 否要查询账户
2）是，账户是否有效且余额大于0，是，输出“Your balance if $ + 余额”
3）否，账户是否无效，是，输出“Your account is no longer active.”
4）否，余额是否为0，是，输出“Your account if empty.”
5）否，输出“Your balance if negative. Please contact bank.”
6）否，输出“Thank you. Have a nice day!”
其中斜体“是”和“否”为一条逻辑线，正体“是”和“否”为另一条逻辑线。

流程图：

流程图(www.udacity.com)

代码如下：

var balance = 156.00;
var checkBalance = true;
var isActive = true;
1. if (checkBalance) {
2. if (isActive && balance > 0) {
3. console.log("Your balance is $" + balance.toFixed(2) + ".");
4. } else if (!isActive) {
5. console.log("Your account is no longer active.");
6. } else if (balance === 0) {
7. console.log("Your account is empty.");
8. } else {
9. console.log("Your balance is negative. Please contact bank.");
10. }
11. } else {
12. console.log("Thank you. Have a nice day!");
13. }

总结

搞清楚逻辑，熟悉规则，条件语句就不是那么难了。而要真正做到上述两点，需要辅之大量的练习。本文仅是入门，后面随着应对场景越来越复杂，还会接触到高级条件语句，到时候再用另起一篇总结。