25 - 运算符 - 三元运算符 - 条件判断的简洁写法

前端 - Javascript 《运算符 - 三元运算符 - 条件判断的简洁写法》

在前端开发的 JavaScript 世界里，我们经常需要根据不同的条件来执行不同的代码。传统的条件判断语句如 if...else 大家都耳熟能详，但今天要给大家介绍一种更为简洁有趣的条件判断写法——三元运算符。

三元运算符的基本语法

三元运算符也被称为条件运算符，它的语法非常简单：条件表达式? 表达式1 : 表达式2。这里的条件表达式会被计算出一个布尔值，如果结果为 true，则整个三元运算符表达式的值为表达式 1 的值；如果结果为 false，则整个表达式的值为表达式 2 的值。

下面通过一个简单的例子来感受一下：

let age = 18;
let message = age >= 18? "你已经成年啦！" : "你还未成年哦！";
console.log(message);

在这个例子中，age >= 18 是条件表达式，当 age 大于等于 18 时，条件为 true，message 的值就是 "你已经成年啦！"；否则，message 的值就是 "你还未成年哦！"。运行这段代码，由于 age 等于 18，所以控制台会输出 "你已经成年啦！"。

三元运算符与 if…else 的对比

我们可以用 if...else 语句来实现上面的功能：

let age = 18;
let message;
if (age >= 18) {
    message = "你已经成年啦！";
} else {
    message = "你还未成年哦！";
}
console.log(message);

对比这两种写法，我们可以发现三元运算符更加简洁，代码量更少。在处理简单的条件判断时，三元运算符无疑是更好的选择。

三元运算符的嵌套使用

三元运算符还可以进行嵌套，实现更复杂的条件判断。比如，我们要根据学生的考试成绩给出不同的评价：

let score = 85;
let evaluation = score >= 90? "优秀" : (score >= 70? "良好" : (score >= 60? "及格" : "不及格"));
console.log(evaluation);

在这个例子中，首先判断 score 是否大于等于 90，如果是则评价为 "优秀"；否则，继续判断 score 是否大于等于 70，如果是则评价为 "良好"；以此类推。最终根据 score 的值输出相应的评价。

总结

下面用一个表格来总结三元运算符和 if...else 语句的特点：
| 特点 | 三元运算符 | if…else 语句 |
| —— | —— | —— |
| 语法简洁度 | 高，代码量少 | 相对复杂，代码量多 |
| 适用场景 | 简单的条件判断 | 复杂的条件判断，包含多条语句的情况 |
| 嵌套难度 | 嵌套过多会使代码可读性降低 | 嵌套结构相对清晰，但代码会变长 |

三元运算符就像是 JavaScript 中的一把瑞士军刀，在处理简单的条件判断时能够快速高效地完成任务。但我们也要注意，不要过度使用嵌套的三元运算符，以免让代码变得难以理解。希望大家在今后的前端开发中能够灵活运用三元运算符，让代码更加简洁优雅！