三元運算符

條件（三元）運算符是 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 語句，但盡量不要嵌套使用，這樣會降低代碼的可讀性。