JavaScript三元运算符：简洁条件判断的利器

1. JavaScript中的问号运算符解析

在JavaScript开发中，我们经常会遇到各种条件判断的场景。传统的if-else语句虽然功能强大，但在处理简单条件时显得过于冗长。这时，问号运算符（?:）就成为了提升代码简洁性的利器。

问号运算符是JavaScript中唯一的三元运算符，它由三部分组成：条件表达式、真值返回结果和假值返回结果。这种紧凑的语法结构特别适合需要根据条件返回不同值的场景，比如变量赋值、函数返回值处理等。

2. 问号运算符的基本语法

2.1 标准语法结构

问号运算符的基本语法格式如下：

javascript复制condition ? expressionIfTrue : expressionIfFalse

这个结构可以理解为：

• 首先评估condition条件
• 如果condition为truthy值，则执行expressionIfTrue
• 如果condition为falsy值，则执行expressionIfFalse

2.2 简单示例解析

让我们看一个实际的例子：

javascript复制const age = 25;
const status = age >= 18 ? '成年人' : '未成年人';
console.log(status); // 输出："成年人"

在这个例子中：

1. 首先评估age >= 18这个条件
2. 因为25确实大于等于18，所以返回'成年人'
3. 最终将返回值赋给status变量

3. 问号运算符的高级用法

3.1 链式条件判断

问号运算符可以嵌套使用来实现多条件判断：

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

这种链式结构虽然紧凑，但需要注意：

• 嵌套层级不宜过深（建议不超过3层）
• 适当添加缩进和换行保持可读性
• 复杂逻辑还是应该使用if-else语句

3.2 与函数结合使用

问号运算符可以很好地与函数调用结合：

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

3.3 对象属性动态访问

在访问可能不存在的对象属性时特别有用：

javascript复制const user = {
  name: '张三',
  address: {
    city: '北京'
  }
};

const city = user.address ? user.address.city : '未知';
console.log(city); // 输出："北京"

4. 问号运算符的常见应用场景

4.1 默认值设置

javascript复制const config = {
  timeout: null
};

const timeout = config.timeout ? config.timeout : 3000;
console.log(timeout); //