JavaScript三元

三元运算符

条件（三元）运算符是 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 三元运算符

42/80

目录

书签

收藏

A

大小