三元運算子

可用於縮短 if / else 操作。這對於快速返回值(即將其分配給另一個變數)非常方便。

例如:

var animal = 'kitty';
var result = (animal === 'kitty') ? 'cute' : 'still nice';

在這種情況下,result 獲得’可愛’值,因為動物的價值是’小貓’。如果動物有另一個值,結果將獲得仍然很好的值。

將此與 if/else 條件的程式碼相比較。

var animal = 'kitty';
var result = '';
if (animal === 'kitty') {
    result = 'cute';
} else {
    result = 'still nice';
}

ifelse 條件可能有幾個操作。在這種情況下,運算子返回最後一個表示式的結果。

var a = 0;
var str = 'not a';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2);

因為 a 等於 0,它變成 1,而 str 變成’不是測試’。涉及 str 的操作是最後一個,所以 b 接收操作的結果,這是 str 中包含的值,即 not a test

三元運算子總是期望其他條件,否則你將得到語法錯誤。作為一種解決方法,你可以在 else 分支中返回類似零的東西 - 如果你沒有使用返回值而只是縮短(或試圖縮短)操作,這無關緊要。

var a = 1;
a === 1 ? alert('Hey, it is 1!') : 0;

如你所見,if (a === 1) alert('Hey, it is 1!'); 會做同樣的事情。它只是一個更長的字元,因為它不需要強制性的 else 條件。如果涉及 else 條件,三元方法將更清潔。

a === 1 ? alert('Hey, it is 1!') : alert('Weird, what could it be?');
if (a === 1) alert('Hey, it is 1!') else alert('Weird, what could it be?');

三元組可以巢狀以封裝其他邏輯。例如

foo ? bar ? 1 : 2 : 3

// To be clear, this is evaluated left to right 
// and can be more explicitly expressed as:

foo ? (bar ? 1 : 2) : 3

這與以下 if/else 相同

if (foo) {
  if (bar) {
    1
  } else {
    2
  }
} else {
  3
}

在風格上,這應該僅用於短變數名稱,因為多行三元組可能會大大降低可讀性。

唯一不能在三元組中使用的語句是控制語句。例如,你不能使用三元組的 return 或 break。以下表示式無效。

var animal = 'kitty';
for (var i = 0; i < 5; ++i) {
    (animal === 'kitty') ? break:console.log(i);
}

對於 return 語句,以下內容也將無效:

var animal = 'kitty';
(animal === 'kitty') ? return 'meow' : return 'woof';

要正確執行上述操作,你將返回三元組,如下所示:

var animal = 'kitty';
return (animal === 'kitty') ? 'meow' : 'woof';