详解如何在 JavaScript 中使用三元运算符

正文

本教程深入解析 JavaScript 中三元运算符的语法结构及其典型应用场景。

三元运算符（亦称条件运算符）旨在实现内联条件判断，以替代传统的if...else结构。此举有助于精简代码并提升可读性，既可用于条件赋值，也可用于条件执行表达式。

语法

三元运算符包含三个操作数，这是 JavaScript 中唯一具备此特征的运算符。其逻辑为：指定测试条件，后接问号，随后是两个由冒号分隔的表达式。若条件判定为真，则执行首个表达式；若为假，则执行末尾表达式。

其标准使用格式如下：

condition ? expr1 : expr2

其中，condition代表待测试的条件。若该值判定为true，则执行expr1。反之，若判定为false，则执行expr2。

expr1与expr2均可为任意表达式，涵盖变量、函数调用或嵌套条件。

具体示例如下：

1 > 2 ? console.log("true") : console.log('false');

利用三元运算符进行赋值

三元运算符最典型的应用场景之一是变量值的决策分配。通常，变量取值依赖于其他变量或特定条件。

尽管此逻辑可通过if...else实现，但会导致代码冗长且降低可读性。示例如下：

const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = '数组太长';
} else {
  message = '数组太短';
}
console.log(message); // 数组太长

上述代码首先定义变量message，随后利用if...else语句判定并赋值。

借助三元运算符，上述逻辑可简化为单行代码：

const numbers = [1,2,3];
let message = numbers.length > 2 ? '数组太长' : '数组太短';
console.log(message); // 数组太长

利用三元运算符执行表达式

三元运算符支持执行各类表达式。

例如，若需依据变量值决定调用哪个函数，传统方式可借助if...else语句实现：

if (feedback === "yes") {
  sayThankYou();
} else {
  saySorry();
}

利用三元运算符，上述逻辑可简化为单行代码：

feedback === "yes" ? sayThankYou() : saySorry();

若feedback的值等于yes，则调用并执行sayThankYou函数。否则，调用并执行saySorry函数。

利用三元运算符进行空值检查

在处理可能未定义值的变量时（如获取用户输入或服务器数据），空值检查至关重要。

通过三元运算符，可在条件操作数位置传入变量名以检测其存在性null。undefined

此方法在对象处理中尤为关键。若尝试访问值为null或undefined的对象属性，将引发错误。预先检查对象是否已定义可有效规避此类错误。

示例如下：

let book = { name: '小明', works: '斗破苍穹' };
console.log(book ? book.name : '张三'); // "小明"
book = null;
console.log(book ? book.name : '张三'); // "张三"

代码块第一部分中，book为包含name与works属性的对象。应用三元运算符时book，系统会检查其是否非null亦非undefined。若满足条件（即有值），则访问name属性并输出至控制台；否则，若为空，则输出张三至控制台。

由于book并非null，书名将记录于控制台。而在第二部分，应用相同条件时，因book为null，三元运算条件失效，故输出“张三”至控制台。

嵌套条件

尽管三元运算符通常内联使用，但可将多个条件作为表达式的一部分。通过嵌套或链接多个条件，可执行类似于if...else if...else语句的判断逻辑。

例如，变量值可能受多重条件制约，可使用if...else if...else实现：

let score = '67';
let grade;
if (score < 50) {
  grade = 'F';
} else if (score < 70) {
  grade = 'D'
} else if (score < 80) {
  grade = 'C'
} else if (score < 90) {
  grade = 'B'
} else {
  grade = 'A'
}
console.log(grade); // "D"

该代码块测试score变量的多个条件以确定其字母等级。

利用三元运算符可实现相同的逻辑，如下所示：

let score = '67';
let grade = score < 50 ? 'F'
  : score < 70 ? 'D'
  : score < 80 ? 'C'
  : score < 90 ? 'B'
  : 'A';
console.log(grade); // "D"

首先评估条件score < 50。若为true，则grade赋值为F。若为false，则计算第二个表达式score < 70。

此过程持续至所有条件均判定为false，此时等级值为A；或直至某条件判定为true，其对应真值被赋给grade。

示例

在实时示例中，可测试三元运算符在多条件下的表现。输入值小于 100 时显示“太低”；大于 100 时显示“太高”；等于 100 时显示“完美”。

结论

如本教程示例所示，JavaScript 三元运算符应用场景广泛。if...else在诸多场景中，三元运算符通过替代冗长语句显著提升了代码可读性。

以上为详解如何在 JavaScript 中使用三元运算符的完整内容，更多关于 JavaScript 三元运算符的资料请查阅本站其他文章！