什么是三元表达式

什么是三元表达式

三元表达式（Ternary Expression）是 JavaScript 中的一种简洁的条件语句，用于根据条件返回不同的值。它的语法如下：

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

• 条件：一个布尔表达式，结果为 true 或 false。
• 表达式1：如果条件为 true，返回该表达式的值。
• 表达式2：如果条件为 false，返回该表达式的值。

1. 基本用法

三元表达式可以替代简单的 if-else 语句，使代码更简洁。

(1) 示例

const age = 20;
const message = age >= 18 ? '成年人' : '未成年人';
console.log(message); // 输出：成年人

(2) 等价于 if-else

let message;
if (age >= 18) {
  message = '成年人';
} else {
  message = '未成年人';
}

2. 嵌套三元表达式

三元表达式可以嵌套使用，但过度嵌套会降低代码可读性。

(1) 示例

const score = 85;
const grade = score >= 90 ? 'A' :
              score >= 80 ? 'B' :
              score >= 70 ? 'C' : 'D';
console.log(grade); // 输出：B

(2) 等价于 if-else if-else

let grade;
if (score >= 90) {
  grade = 'A';
} else if (score >= 80) {
  grade = 'B';
} else if (score >= 70) {
  grade = 'C';
} else {
  grade = 'D';
}

3. 使用场景

(1) 赋值

const isLoggedIn = true;
const welcomeMessage = isLoggedIn ? '欢迎回来！' : '请登录';
console.log(welcomeMessage); // 输出：欢迎回来！

(2) 返回值

function getFee(isMember) {
  return isMember ? '$2.00' : '$10.00';
}
console.log(getFee(true)); // 输出：$2.00

(3) 条件渲染（如 React）

const isAdmin = true;
const button = isAdmin ? <AdminButton /> : <UserButton />;

4. 注意事项

1. 可读性：避免过度嵌套三元表达式，否则会降低代码可读性。

   // 不推荐
   const result = condition1 ? value1 :
                  condition2 ? value2 :
                  condition3 ? value3 : value4;
   

2. 性能：三元表达式与 if-else 性能相近，选择时以可读性为主。

3. 副作用：避免在三元表达式中执行有副作用的操作（如赋值、函数调用）。

   // 不推荐
   const value = condition ? (a = 10) : (b = 20);
   

总结

特性	三元表达式	if-else
语法	条件 ? 表达式1 : 表达式2	if (条件) { ... } else { ... }
简洁性	更简洁	较冗长
可读性	适合简单条件	适合复杂逻辑
嵌套	可嵌套，但不宜过多	可嵌套，适合复杂条件

三元表达式是 JavaScript 中一种简洁的条件语句，适合处理简单的条件逻辑，但需注意代码可读性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github