JavaScript 三元运算符

什么是三元运算符？

三元运算符是JavaScript中唯一一个需要三个操作数的运算符。它提供了一种简洁的方式来编写条件语句，是if-else语句的简化版本。

三元运算符的基本语法如下：

条件 ? 表达式1 : 表达式2

三元运算符的工作方式是：

首先评估"条件"
如果条件为真（truthy），则返回"表达式1"的值
如果条件为假（falsy），则返回"表达式2"的值

备注

三元运算符也被称为条件运算符或问号冒号运算符。

三元运算符与if-else对比

让我们通过对比来理解三元运算符的简洁性：

使用if-else语句：

let age = 20;
let status;

if (age >= 18) {
  status = "成年";
} else {
  status = "未成年";
}

console.log(status); // 输出: 成年

使用三元运算符：

let age = 20;
let status = age >= 18 ? "成年" : "未成年";

console.log(status); // 输出: 成年

可以看出，使用三元运算符能让代码更加简洁。

三元运算符的详细用法

基本用法

三元运算符最常见的用法是根据条件为变量赋值：

let score = 75;
let result = score >= 60 ? "及格" : "不及格";
console.log(result); // 输出: 及格

多层嵌套使用

三元运算符可以嵌套使用，但请注意，过度嵌套会降低代码的可读性：

let score = 85;
let grade = score >= 90 ? "优" : score >= 80 ? "良" : score >= 60 ? "及格" : "不及格";
console.log(grade); // 输出: 良

警告

虽然三元运算符可以嵌套，但当条件判断变得复杂时，建议使用if-else if-else语句，以保持代码的可读性。

let score = 85;
let grade;

if (score >= 90) {
  grade = "优";
} else if (score >= 80) {
  grade = "良";
} else if (score >= 60) {
  grade = "及格";
} else {
  grade = "不及格";
}

与逻辑运算符结合使用

三元运算符可以与逻辑运算符结合使用：

let isAuthenticated = true;
let userName = "张三";
let greeting = isAuthenticated ? `欢迎回来，${userName}！` : "请先登录";

console.log(greeting); // 输出: 欢迎回来，张三！

返回不同类型的值

三元运算符的两个表达式可以返回不同类型的值：

let hasPermission = false;
let accessResult = hasPermission ? true : "无权限访问";

console.log(accessResult); // 输出: 无权限访问
console.log(typeof accessResult); // 输出: string

在函数中的应用

三元运算符在函数中也非常实用：

function getDiscount(isMember) {
  return isMember ? 0.2 : 0;
}

console.log(getDiscount(true)); // 输出: 0.2
console.log(getDiscount(false)); // 输出: 0

实际应用场景

1. 条件渲染UI元素（React示例）

在前端框架如React中，三元运算符常用于条件渲染：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>欢迎回来！</h1> : <h1>请先登录</h1>}
    </div>
  );
}

2. 设置默认值

三元运算符常用于检查变量是否已定义，并设置默认值：

function greet(name) {
  // 如果name未定义或为空，则使用"访客"作为默认值
  const userName = name ? name : "访客";
  return `你好，${userName}！`;
}

console.log(greet("张三")); // 输出: 你好，张三！
console.log(greet()); // 输出: 你好，访客！

提示

对于设置默认值的场景，你也可以使用逻辑OR运算符(||)或者ES6的默认参数：

// 使用逻辑OR运算符
function greet(name) {
  const userName = name || "访客";
  return `你好，${userName}！`;
}

// 使用ES6默认参数
function greet(name = "访客") {
  return `你好，${name}！`;
}

3. 条件链式调用

当你需要在对象可能为null的情况下链式调用方法时：

// 传统方式
let streetName;
if (user && user.address && user.address.street) {
  streetName = user.address.street.name;
} else {
  streetName = "未知";
}

// 使用三元运算符
let streetName = user && user.address && user.address.street ? user.address.street.name : "未知";

// 现代JavaScript中，你可以使用可选链运算符
let streetName = user?.address?.street?.name || "未知";

4. 基于条件选择类名（CSS类）

在处理动态样式时：

// 为元素添加不同的类
const buttonClass = isActive ? "btn btn-active" : "btn";

// 在React中:
return <button className={isActive ? "btn btn-active" : "btn"}>点击我</button>;

三元运算符的注意事项

可读性：虽然三元运算符可以使代码更简洁，但过度使用或嵌套可能会降低代码的可读性。
优先级：三元运算符的优先级相对较低，在复杂表达式中最好使用括号明确运算顺序：

// 不够清晰
let result = a > b ? c + d : e - f;

// 更清晰
let result = (a > b) ? (c + d) : (e - f);

返回值：三元运算符是一个表达式，总是返回一个值，这与if-else语句不同，后者是控制流语句。
无法执行多条语句：三元运算符的每个分支只能执行一条语句，无法像if-else那样在每个分支中执行多条语句。

总结

三元运算符是JavaScript中一个强大而简洁的特性，它可以帮助你：

用一行代码替代简单的if-else语句
基于条件为变量赋值
在条件渲染中提供简洁的语法

在实际编程中，三元运算符是一个非常有用的工具，但记住保持代码的可读性和清晰性是最重要的。当条件逻辑变得复杂时，考虑使用传统的if-else语句。

练习题

使用三元运算符创建一个函数getMax，接收两个参数并返回较大的一个。
编写一个函数，使用三元运算符根据一个数的正负或零返回不同的消息。
重构下面的if-else语句，使用三元运算符：

let time = 20;
let greeting;
if (time < 12) {
  greeting = "早上好";
} else if (time < 18) {
  greeting = "下午好";
} else {
  greeting = "晚上好";
}

什么是三元运算符？​

三元运算符与if-else对比​

三元运算符的详细用法​

基本用法​

多层嵌套使用​

与逻辑运算符结合使用​

返回不同类型的值​

在函数中的应用​

实际应用场景​

1. 条件渲染UI元素（React示例）​

2. 设置默认值​

3. 条件链式调用​

4. 基于条件选择类名（CSS类）​

三元运算符的注意事项​

总结​

练习题​

延伸阅读​