三元運(yùn)算符

條件（三元）運(yùn)算符是 JavaScript 僅有的使用三個(gè)操作數(shù)的運(yùn)算符。一個(gè)條件后面會(huì)跟一個(gè)問號(hào)（?），如果條件為 truthy ，則問號(hào)后面的表達(dá)式A將會(huì)執(zhí)行；表達(dá)式A后面跟著一個(gè)冒號(hào)（:），如果條件為 falsy ，則冒號(hào)后面的表達(dá)式B將會(huì)執(zhí)行。本運(yùn)算符經(jīng)常作為 if 語句的簡捷形式來使用。（MDN）

三元運(yùn)算符，也稱條件運(yùn)算符、三目運(yùn)算符。

三元運(yùn)算符可以代替簡單的 if 語句。

1. 語法

條件 ? 條件為真時(shí)執(zhí)行的表達(dá)式 : 條件為假時(shí)執(zhí)行的表達(dá)式

當(dāng)條件成立或者不成立的時(shí)候，會(huì)執(zhí)行對(duì)應(yīng)的表達(dá)式，并將表達(dá)式的結(jié)果作為三元運(yùn)算的結(jié)果。

利用三元運(yùn)算符判斷年齡是否成年獲取對(duì)應(yīng)的文案：

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);

使用三元運(yùn)算符可以代替簡單的 if 語句，讓代碼更簡潔，減少分支。

其中條件為假的情況除了 false ，有以下幾種：

• null
• undefined
• NaN
• 0(數(shù)字0)
• 空字符串

這些值有在 Boolean 中提到過，他們都可以被隱式轉(zhuǎn)換為 false。

2. 注意點(diǎn)

2.1 盡量不要嵌套

嵌套的三元運(yùn)算符會(huì)讓可讀性變差

比如：如果下班回來看到賣水果的就買一斤西瓜，如果有桃子，就只買桃子。

var hasFruit = true;
var hasPeach = false;

var buy = hasFruit ? hasPeach ? '買桃子' : '買西瓜' : '沒有賣水果的';

這樣會(huì)讓邏輯變得混亂，可讀性變差。

這種情況應(yīng)使用 if 代替。

var hasFruit = true;
var hasPeach = false;

var buy = '';

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

  // 或者這里使用三元運(yùn)算符
  // buy = hasPeach ? '買桃子' : '買西瓜';
} else {
  buy = '沒有賣水果的';
}

換成 if 可以讓邏輯更清晰。

有時(shí)候不能為了讓代碼看起來變少而犧牲代碼可讀性，代碼可讀性是非常重要的。

2.2 避免使用不必要的三元運(yùn)算符

如判斷是否成年，結(jié)果需要布爾值：

var age = 11;

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

console.log(isAdult);

第一眼看到這串代碼，可能會(huì)覺得沒有問題。

在開發(fā)中經(jīng)常會(huì)遇到這樣的代碼，有多年開發(fā)經(jīng)驗(yàn)的老司機(jī)也可能會(huì)這樣寫，但其實(shí)這里沒有必要使用三元運(yùn)算符，因?yàn)?age >= 18 這里的比較運(yùn)算符返回的就是布爾值。

在開發(fā)中應(yīng)該避免這樣不必要三元運(yùn)算。

var age = 11;

var isAdult = age >= 18;

console.log(isAdult);

3. 小結(jié)

三元運(yùn)算符可以代替簡單的 if 語句，但盡量不要嵌套使用，這樣會(huì)降低代碼的可讀性。