章节索引 :

三元运算符

条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号(?),如果条件为 truthy ,则问号后面的表达式A将会执行;表达式A后面跟着一个冒号(:),如果条件为 falsy ,则冒号后面的表达式B将会执行。本运算符经常作为 if 语句的简捷形式来使用。(MDN)

三元运算符,也称条件运算符、三目运算符。

三元运算符可以代替简单的 if 语句。

1. 语法

条件 ? 条件为真时执行的表达式 : 条件为假时执行的表达式

当条件成立或者不成立的时候,会执行对应的表达式,并将表达式的结果作为三元运算的结果。

利用三元运算符判断年龄是否成年获取对应的文案:

var age = 19;

var str = age > 19 ? '成年了' : '没有成年';

console.log(str); // 输出:"成年了"

// if 的写法2
var age = 19;

var str = '';

if (age > 19) {
  str = '成年了';
} else {
  str = '没有成年';
}

console.log(str);

// if 的写法2
var age = 19;
var str = '没有成年';

if (str > 19) {
  str = '成年了';
}

console.log(str);

使用三元运算符可以代替简单的 if 语句,让代码更简洁,减少分支。

其中条件为假的情况除了 false ,有以下几种:

  • null
  • undefined
  • NaN
  • 0(数字0)
  • 空字符串

这些值有在 Boolean 中提到过,他们都可以被隐式转换为 false

2. 注意点

2.1 尽量不要嵌套

嵌套的三元运算符会让可读性变差

比如:如果下班回来看到卖水果的就买一斤西瓜,如果有桃子,就只买桃子。

var hasFruit = true;
var hasPeach = false;

var buy = hasFruit ? hasPeach ? '买桃子' : '买西瓜' : '没有卖水果的';

这样会让逻辑变得混乱,可读性变差。

这种情况应使用 if 代替。

var hasFruit = true;
var hasPeach = false;

var buy = '';

if (hasFruit) {
  if (hasPeach) {
    buy = '买桃子';
  } else {
    buy = '买西瓜';
  }

  // 或者这里使用三元运算符
  // buy = hasPeach ? '买桃子' : '买西瓜';
} else {
  buy = '没有卖水果的';
}

换成 if 可以让逻辑更清晰。

有时候不能为了让代码看起来变少而牺牲代码可读性,代码可读性是非常重要的。

2.2 避免使用不必要的三元运算符

如判断是否成年,结果需要布尔值:

var age = 11;

var isAdult = age >= 18 ? true : false;

console.log(isAdult);

第一眼看到这串代码,可能会觉得没有问题。

在开发中经常会遇到这样的代码,有多年开发经验的老司机也可能会这样写,但其实这里没有必要使用三元运算符,因为 age >= 18 这里的比较运算符返回的就是布尔值。

在开发中应该避免这样不必要三元运算。

var age = 11;

var isAdult = age >= 18;

console.log(isAdult);

3. 小结

三元运算符可以代替简单的 if 语句,但尽量不要嵌套使用,这样会降低代码的可读性。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源