本节学习目标
- 掌握
if-else语句的使用 - 掌握
switch语句的使用
本节内容
网上一直流传这么一个段子
妻子说：“你去菜场买一个西瓜，如果看见西红柿，就买两个。”
过了一会，丈夫买了两个西瓜回来。
妻子问：“你怎么买了两个西瓜？”
程序员丈夫回答：“因为在菜场看见西红柿了！”
吃瓜群众表示一脸问号，但相信学完这一节，你一定会说：“嗯……没毛病！”
- 理解条件分支语句
首先，我们来了解一下条件分支语句是做什么的。
条件分支语句就是基于不同的 条件 去执行不同的 动作 。
我们用程序员的思维来翻译一下上面的段子。"如果"后面的是"条件"，"条件"之后跟了相应的"动作"。于是，我们得到下面两组“条件 -> 动作”：
- 条件成立：看见西红柿 -> 动作1：买两个西瓜
- 条件不成立：没看见西红柿 -> 动作2：买一个西瓜
接着，我们来看一下 JavaScript 中是如何使用条件分支语句的。
-
if语句
if 语句的语法格式如下
if (condition)
{
// 当 condition==true 时执行的语句块
}
需要注意的是，这里的 condition 的身份是判断语句，只有真（true）、假（false）两种情况，即条件要么成立，要么不成立，只有两面。
示例
var seeTomato = 'yes';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
//输出结果 Buy two watermelons!
那么好学的你可能会问，如果条件不成立，代码该怎么执行呢？答案是，跳过 if 语句块，执行 if 语句块后面的语句。
示例
var seeTomato = 'no';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
console.log('Buy nothing!');
//输出结果 Buy nothing！
目前我们还无法用 JavaScript 翻译出上面的段子，这就需要用到 if-else 语句了。
-
if-else语句
if-else 语句的语法格式如下
if (condition)
{
// 当 condition==true 时执行的语句块1
}
else
{
// 当 condition==false 时执行的语句块2
}
当条件成立时，执行语句块1；当条件不成立时，执行语句块2.
好了，现在我们来翻译一下上面的段子。
示例
var seeTomato = 'yes';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
else
{
console.log('Buy one watermelon!');
}
// 输出结果 Buy two watermelons!
var seeTomato = 'no';
if (seeTomato == 'yes')
{
console.log('Buy two watermelons!');
}
else
{
console.log('Buy one watermelon!');
}
// 输出结果 Buy one watermelon!
所以程序员丈夫是不是买得没毛病？！
可能好学的你又会问，上面只能设置一个条件，怎么设置多个条件呢？答案是，把 if-else 语句组合起来。
-
if-else if-else语句
if-else 语句的语法格式如下
if (condition1)
{
// 当 condition1==true 时执行的语句块1
}
else if (condition2)
{
// 当 condition2==true 时执行的语句块2
}
else
{
// 当 condition1==false && condition2==false 时执行的语句块3
}
刚看到这个可能会一头雾水，我们来转换一下形式
if (condition1)
{
// 当 condition1==true 时执行的语句块1
}
else
{
if (condition2)
{
// 当 condition2==true 时执行的语句块2
}
else
{
// 当 condition1==false && condition2==false 时执行的语句块3
}
}
这样是不是就好理解了。第二个 if-else 嵌套在了第一个 if-else 中。但是，为了方便，为了美观，为了养成良好的代码书写习惯，我们要采用第一种写法。
示例
var date = 3;
if (date == 1)
{
console.log('星期一');
}
else if (date == 2)
{
console.log('星期二');
}
else{
console.log('未知');
}
// 输出结果 未知
看到这段代码，你可能回想，星期三、星期四……怎么办？那就再嵌套呗！
示例
var date = 5;
if (date == 1)
{
console.log('星期一');
}
else if (date == 2)
{
console.log('星期二');
}
else if (date == 3)
{
console.log('星期三');
}
else if (date == 4)
{
console.log('星期四');
}
else if (date == 5)
{
console.log('星期五');
}
else if (date == 6)
{
console.log('星期六');
}
else if (date == 7)
{
console.log('星期日');
}
else
{
console.log('未知');
}
// 输出结果 星期五
于是好学的你又会发问了，代码这么长，有没有方便的方法可以简化一下。那么 switch 语句可以帮助到你。
-
swich语句
switch 语句的语法格式如下
switch(n)
{
case n1:
执行代码块 1
break;
case n2:
执行代码块 2
break;
default:
与 case n1 和 case n2 不同时执行的代码块3
}
这里的 n 是一个变量，若 n 与 n1 相等，则执行代码块1，若
n 与 n2 相等，则执行代码块2，若都不相等，则执行代码块3。
于是，之前的代码可以这样写
var date = 5;
switch(date)
{
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("未知");
}
//输出结果 星期五
最后，这里的 break 语句是做什么用的呢？break 语句在后续学习中会介绍，先小剧透一下：break 语句在这里的作用是跳出这个 switch 语句块。如果不使用 break ,成立的case后的代码都会接着执行，用了 break ,就可以跳出这个 switch 语句块。
示例
var date = 5;
switch(date)
{
case 1:
console.log("星期一");
case 2:
console.log("星期二");
case 3:
console.log("星期三");
case 4:
console.log("星期四");
case 5:
console.log("星期五");
case 6:
console.log("星期六");
case 7:
console.log("星期日");
default:
console.log("未知");
}
输出结果
星期五
星期六
星期日
未知
本节的知识讲解就到这了，最后强调一点，条件分支语句每次只执行多种情况中的一种情况。
参考资料
本节练习
运行以下代码，并思考为什么出现这样的结果。
- if-else
var x = 3;
if(x = 1)
console.log('x=1');
else
console.log('x!=1');
- switch
var date = 5;
switch(date)
{
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
default:
console.log("未知");
}
