三元運(yùn)算符

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

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

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

1. 語(yǔ)法

條件 ? 條件為真時(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 ? '成年了' : '沒(méi)有成年';

console.log(str); // 輸出："成年了"

// if 的寫(xiě)法2
var age = 19;

var str = '';

if (age > 19) {
  str = '成年了';
} else {
  str = '沒(méi)有成年';
}

console.log(str);

// if 的寫(xiě)法2
var age = 19;
var str = '沒(méi)有成年';

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

console.log(str);

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

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

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

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

2. 注意點(diǎn)

2.1 盡量不要嵌套

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

比如：如果下班回來(lái)看到賣(mài)水果的就買(mǎi)一斤西瓜，如果有桃子，就只買(mǎi)桃子。

var hasFruit = true;
var hasPeach = false;

var buy = hasFruit ? hasPeach ? '買(mǎi)桃子' : '買(mǎi)西瓜' : '沒(méi)有賣(mài)水果的';

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

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

var hasFruit = true;
var hasPeach = false;

var buy = '';

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

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

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

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

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

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

var age = 11;

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

console.log(isAdult);

第一眼看到這串代碼，可能會(huì)覺(jué)得沒(méi)有問(wèn)題。

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

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

var age = 11;

var isAdult = age >= 18;

console.log(isAdult);

3. 小結(jié)

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