条件分支结构

本节学习目标

• 掌握 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语句在这里的作用是跳出这个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("未知");
}

输出结果

星期五
星期六
星期日
未知

本节的知识讲解就到这了，最后强调一点，条件分支语句每次只执行多种情况中的一种情况。

参考资料

• JavaScript If...Else 语句
• JavaScript switch 语句

本节练习

运行以下代码，并思考为什么出现这样的结果。

• 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("未知");
  }