JavaScript编程基础 – 条件语句

JavaScript Programming Essentials – Conditional Statements

条件表达式是一种简单而强大的控制形式，在JavaScript语言中担当分支的角色。

每一个程序都有一些程序语句，按照它的执行顺序向后执行；条件作为控制形式，能够帮助我们控制一小段代码的执行走向，从而实现程序设计考虑的多种条件选项。

1. if 语句

1) 代码块

最常用的条件语句是在 if 开头的代码块中实现的。所谓代码块，就是由用大括号{ } 包裹的多个表达式组成的程序内容；当然，它也可以为空。

示例一，说明了给不同变量赋值的过程，这是个简单的代码块：

{
    var a = 1;
    var b= 3;
}

• 1
• 2
• 3
• 4

示例二，代码块自身也可以相互嵌套：

{
    var a = 1;
    var b= 3;
    {
        c = a + b;
        {
            d = a – b;
        }
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

2) if 条件表达式

如果满足某个条件，那么可以输出一个结果，以下的if条件表达式可以完成这个任务。

var result = ‘’, a = 3;
if (a > 2) {
    result = ‘a is greater than 2’;
}

• 1
• 2
• 3
• 4

如上所示，if 表达式通常包含以下几个部分：

• if关键字
• 包含在()里的条件部分，用来判断”a是否大于2”;
• 包含在{}内的代码块，当if条件满足时该程序要执行的部分。

3) else 子句

如果不是单一条件，而是有两种可能的分支以上，则在 if 语句后还有 else 子句作为可选项。

如果 if 条件部分的表达式返回 true, 则执行紧跟的语句；如果条件部分的表达式返回false的话，我们可以执行后面 else 子句中的代码块，例如：

var result = ‘’, a = 3;
if (a > 2) {
    result = ‘a is greater than 2’;
} else {
    result = ‘a is NOT greater than 2’;
}

• 1
• 2
• 3
• 4
• 5
• 6

为了实现更复杂的分支，我们可以在if和else之间插入任意多个else if子句，例如：

if (a > 2 || a < -2) {
    result = ‘a is not between -2 and 2’;
} else if (a === 0 && b === 0) {
    result = ‘both a and b are zeros’;
} else if (a === b) {
    result = ‘a and b are equal’;
} else {
    result = ‘I give up’;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

如果将变量a，b初始化(a = 3, b = 4)后，控制台输出结果如下：

证明 if… else 条件表达式执行成功，预设条件的选项能满足要求。

2. 简化 if 表达式

如果预设的if条件表达式非常简单，那么，可以考虑用其它形式来替代if表达式的传统框架。

1) 先看以下代码，用if表达式代码判断a是否为1：

var a = 1;
var result = '';
if (a === 1) {
    result = 'a is one';
} else {
    result = 'a is not one';
}
console.log(result);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

执行结果如下图所示：

2) 为了输出同样的结果，完全可以简化上述的代码如下：

var a = 1;
var result = (a === 1) ? "a is one" : "a is not one";
console.log("a = ", a);
console.log(result);

• 1
• 2
• 3
• 4

执行结果如下图所示：

这里的 ? : 叫作三元操作符，因为它需要三个操作数。

为了表达更加清晰些，最好在其中加入一些括号，如以下代码：

var a = 123;
a = (a > 100 ? 100 : a < 50) ? 50 : a;
console.log(a);

• 1
• 2
• 3

执行结果如下图所示：

3. switch语句

当我们发现在if表达式中使用了太多的else if子句时，就应该考虑用switch语句来代替if语句了，这样，会显得格式工整有序。

var a = '1';
result = '';
switch (a) {
    case 1:
        result = 'Number 1';
        break;
    case '1':
        result = 'String 1';
        break;
    default:
        result = 'I don\'t know.';
        break;
}
console.log("a = ", a);
console.log(result);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

执行结果如下图所示：

可以看出，switch语句有以下几个部分组成：

• switch语句；
• 括号中的表达式。通常会是一个常量，但也可以是其他任何能提供返回值的东西；
• 包含在大括号{ }中的多个case块加粗样式；
• 每个case语句后面都有一个表达式，该表达式结果将会与switch语句的表达式进行对比。如果对比的结果为true, 则case语句中冒号之后的代码将会被执行；
• Break语句是可选的，实际上是case块的结束符，即当代码执行到break语句时，整个switch语句就执行完成了；若跳过break语句，就继续执行下一个case块；
• 关键字的标记为 default 的默认条件代码块是可选的。如果其它case条件都不为true的话，default条件就会被执行。

4. 小结：

综上所述，利用if表达式可以顺利完成满足某个或多个条件的选项，实现程序的分支；if 表达式也可以简化为一行语句，此时，利用三元操作符完成分支。

如果由多个条件需要满足，则可以选择switch语句，利用每个case语句的表达式，将结果进行对比，结果为true的被执行。

JavaScript条件表达式在实际项目中非常常见，也十分重要。后续文章会结合条件表达式进行其它部分介绍。

技术好文持续推出，敬请关注。

喜欢就点赞哈。?