跳到主要内容

JavaScript 三元运算符

什么是三元运算符？​

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

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

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

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

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

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

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

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

使用if-else语句：

javascript
let age = 20;
let status;

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

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

使用三元运算符：

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

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

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

三元运算符的详细用法​

基本用法​

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

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

多层嵌套使用​

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

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

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

javascript
let score = 85;
let grade;

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

与逻辑运算符结合使用​

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

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

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

返回不同类型的值​

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

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

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

在函数中的应用​

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

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

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

实际应用场景​

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

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

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

2. 设置默认值​

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

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

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

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

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

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

3. 条件链式调用​

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

javascript
// 传统方式
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类）​

在处理动态样式时：

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

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

三元运算符的注意事项​

  1. 可读性：虽然三元运算符可以使代码更简洁，但过度使用或嵌套可能会降低代码的可读性。

  2. 优先级：三元运算符的优先级相对较低，在复杂表达式中最好使用括号明确运算顺序：

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

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

  1. 返回值：三元运算符是一个表达式，总是返回一个值，这与if-else语句不同，后者是控制流语句。

  2. 无法执行多条语句：三元运算符的每个分支只能执行一条语句，无法像if-else那样在每个分支中执行多条语句。

总结​

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

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

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

练习题​

  1. 使用三元运算符创建一个函数getMax，接收两个参数并返回较大的一个。
  2. 编写一个函数，使用三元运算符根据一个数的正负或零返回不同的消息。
  3. 重构下面的if-else语句，使用三元运算符：
javascript
let time = 20;
let greeting;
if (time < 12) {
  greeting = "早上好";
} else if (time < 18) {
  greeting = "下午好";
} else {
  greeting = "晚上好";
}

延伸阅读​

  1. 三元运算符与短路逻辑运算符（&&和||）的结合使用
  2. JavaScript中的可选链运算符（?.）如何替代某些三元运算符用例
  3. 空值合并运算符（??）与三元运算符的对比