【JavaScript 教程】第四章 程序流程02— 三元运算符使您的代码更简洁

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节中，我们学习了JavaScript 程序流程中的if else语句，错过的小伙伴可以点击文章《 【JavaScript 教程】第四章 程序流程01— JavaScript if else 语句》进行学习。

那么，在今天的教程中，我们将一起来学习如何使用 JavaScript 三元运算符使您的代码更加简洁。 

JavaScript 三元运算符简介

当您想在特定测试的计算结果为true时执行代码块，您通常会使用if-else语句。例如，如果age大于16，则允许该人开车可以编码如下：

var age = 19;
var canDrive;
if (age > 16) {
    canDrive = 'yes';
} else {
    canDrive = 'no';
}

在此示例中，您可以使用三元运算符作为if-else语句的快捷方式，如下所示：

var age = 19;
var canDrive = age > 16 ? 'yes' : 'no';

这样，代码看起来干净多了。

一般来说，三元运算符的语法如下：

condition ? expression_1 : expression_2;

JavaScript 三元运算符是唯一接受三个操作数的运算符。

condition是一个表达式计算结果为布尔值（true或false），无论是true或false。如果条件为true，则三元运算符返回expression_1，否则返回expression_2。

expression_1，和expression_2是任何类型的表达式。

JavaScript 三元运算符示例

设置默认参数

ES5 中三元运算符的典型用途之一是设置函数的默认参数，例如：

function foo(bar) {
    bar = typeof(bar) !== 'undefined' ? bar : 10;
    console.log(bar);
}
foo(); // 10
foo(20); // 20

在本例中，如果不传递bar参数，则其值设置为10。否则，bar参数使用其传递的值，在本例中为 20。

请注意，ES6引入了一种更好的方法来设置函数的默认参数。

执行多项操作

可以在三元运算符的每种情况下执行多个操作，每个操作用逗号分隔。请参阅以下示例：

var authenticated = true;
var nextURL = authenticated ? (
    alert('You will redirect to admin area'),
        '/admin'
) : (
    alert('Access denied'),
        '/403'
);
// redirect to nextURL here
console.log(nextURL); // '/admin'

在此示例中，三元运算符的返回值是逗号分隔列表中的最后一个值。

简化三元运算符

请参阅以下示例：

var locked = 1;
var canChange = locked != 1 ? true : false;

如果locked为 1，则canChange变量设置为false，否则设置为true。

在这种情况下，您可以使用布尔表达式来简化它，如下所示：

var locked = 1;
var canChange = locked != 1;

使用多个 JavaScript 三元运算符

以下示例显示如何在同一表达式中使用两个三元运算符：

var speed = 90;
var message = speed >= 120 ? 'Too Fast' : (speed >= 80 ? 'Fast' : 'OK');
console.log(message);

当三元运算符使代码更易于阅读时，最佳做法是使用它。如果逻辑包含许多if...else语句，则不应使用三元运算符。

总结

通过本教程的学习，我们知道了如何使用 JavaScript 三元运算符，您可以将其用作 if-else 语句的快捷方式，使您的代码更简洁。

学习更多技能

请点击下方公众号