if、else if 和 else 语句

现在是时候将拼图的各个部分组合起来了。你已经学习了不同的原始类型和复合类型，知道如何检查这些类型，也掌握了 JavaScript 中的基本函数、算术运算（加法、减法、乘法等）以及逻辑运算（真或假）。

目前只剩下两个关键点。到目前为止，我们能够编写一系列按顺序执行的指令来完成计算。在软件开发中，有三种控制结构：

1. 顺序：依次书写指令
2. 选择：执行一组指令，或者另一组
3. 循环：有限或无限次地执行一组指令

由于你已经掌握了如何按顺序书写指令，现在是时候学习选择和循环了。我们先从选择开始：

1if ( condition ) {
2    instruction1;
3    instruction2;
4    //...
5}

if 语句

if 分支中的代码只有在 condition 为真值时才会执行。

注意 if 和左括号之间的空格。这个空格是为了表明 if 是一个 关键字，而不是一个函数。虽然这个空格不是强制要求，但我强烈建议保留它，以提高代码可读性。

1function printNumber( x )
2{
3    if ( typeof x === 'number' ) 
4    {
5        console.log( x + ' is a number.' ); 
6    }
7}
8 
9printNumber(5);
10console.log(printNumber());

运行上述代码时，第一个输出是控制台打印的内容，第二个是 printNumber() 函数的返回值。记住，如果函数没有明确指定返回值，它会默认返回 undefined。

当我们用非数值参数调用 printNumber 函数时，不会输出任何内容，因为 if 分支内的代码仅在条件为真值时才会执行。

1> printNumber( '' )
2undefined

添加另一个 if 语句

目前的情况有些别扭：当输入不是数字时，什么都不会输出。但你已经掌握了编写此类程序所需的所有知识。思路如下：

• 如果 x 是数字，则打印它
• 如果 x 不是数字，则打印提示信息 "The input has to be a number."

1function printNumber( x ) {
2    if ( typeof x === 'number' ) {
3        console.log( x + ' is a number.' ); 
4    }
5    if ( typeof x !== 'number' ) {
6        console.log( 'The input has to be a number.' ); 
7    }
8}
9 
10printNumber(3);
11printNumber("blah"); 

else 语句

这个解决方案的第二个主要问题是：我们做了太多重复的工作，毫无必要。

这个问题的核心在于缺乏 抽象。试想有一天有人发现需要修改条件 typeof x === 'number'。如果你忘记同步修改第二个条件，就会导致代码不一致。我们更倾向于尽可能减少思考负担。因此，我推荐另一种方案，只使用一个条件：

1function printNumber( x ) {
2    if ( typeof x === 'number' ) {
3        console.log( x + ' is a number.' ); 
4    } else {
5        console.log( 'The input has to be a number.' ); 
6    }
7}
8
9printNumber(3);
10printNumber("blah");

注意 else 关键字。else 分支仅在原始条件为假时才会执行。

这个思路还可以进一步扩展：在 else 后面可以添加另一个条件：

1function logLampColor( state ) {
2    if ( state === 1 ) {
3        console.log( 'Red' );
4    } else if ( state === 2 ) {
5        console.log( 'Yellow' );
6    } else if ( state === 3 ) {
7        console.log( 'Green' );
8    } else {
9        console.log( 'Wrong lamp state' );
10    }
11}
12
13logLampColor(1);
14logLampColor(3);
15logLampColor(2);
16logLampColor();

也就是说，如果第一个条件不成立，就测试下一个 else if 条件；如果仍然不成立，继续测试下一个，直到所有 else if 都失败，最后执行 else 语句。

上述代码的美妙之处在于，你可以像阅读自然语言一样理解它：如果状态是 1，就输出红色；否则，如果状态是 2，就输出黄色；依此类推。