JavaScript 三元運(yùn)算符簡介

當(dāng)您想在特定測試的計(jì)算結(jié)果為true時(shí)執(zhí)行代碼塊，您通常會(huì)使用if-else語句。例如，如果age大于16，則允許該人開車可以編碼如下：

var age = 19;var canDrive;if (age > 16) {    canDrive = 'yes';} else {    canDrive = 'no';}

在此示例中，您可以使用三元運(yùn)算符作為if-else語句的快捷方式，如下所示：


var age = 19;var canDrive = age > 16 ? 'yes' : 'no';

這樣，代碼看起來干凈多了。

一般來說，三元運(yùn)算符的語法如下：


condition ? expression_1 : expression_2;

JavaScript 三元運(yùn)算符是唯一接受三個(gè)操作數(shù)的運(yùn)算符。

condition是一個(gè)表達(dá)式計(jì)算結(jié)果為布爾值（true或false），無論是true或false。如果條件為true，則三元運(yùn)算符返回expression_1，否則返回expression_2。

expression_1，和expression_2是任何類型的表達(dá)式。

JavaScript 三元運(yùn)算符示例

設(shè)置默認(rèn)參數(shù)

ES5 中三元運(yùn)算符的典型用途之一是設(shè)置函數(shù)的默認(rèn)參數(shù)，例如：


function foo(bar) {    bar = typeof(bar) !== 'undefined' ? bar : 10;    console.log(bar);}foo(); // 10foo(20); // 20

在本例中，如果不傳遞bar參數(shù)，則其值設(shè)置為10。否則，bar參數(shù)使用其傳遞的值，在本例中為 20。

請(qǐng)注意，ES6引入了一種更好的方法來設(shè)置函數(shù)的默認(rèn)參數(shù)。

執(zhí)行多項(xiàng)操作

可以在三元運(yùn)算符的每種情況下執(zhí)行多個(gè)操作，每個(gè)操作用逗號(hào)分隔。請(qǐng)參閱以下示例：


var authenticated = true;var nextURL = authenticated ? (    alert('You will redirect to admin area'),        '/admin') : (    alert('Access denied'),        '/403');// redirect to nextURL hereconsole.log(nextURL); // '/admin'

在此示例中，三元運(yùn)算符的返回值是逗號(hào)分隔列表中的最后一個(gè)值。

簡化三元運(yùn)算符

請(qǐng)參閱以下示例：


var locked = 1;var canChange = locked != 1 ? true : false;

如果locked為 1，則canChange變量設(shè)置為false，否則設(shè)置為true。

在這種情況下，您可以使用布爾表達(dá)式來簡化它，如下所示：


var locked = 1;var canChange = locked != 1;

使用多個(gè) JavaScript 三元運(yùn)算符

以下示例顯示如何在同一表達(dá)式中使用兩個(gè)三元運(yùn)算符：


var speed = 90;var message = speed >= 120 ? 'Too Fast' : (speed >= 80 ? 'Fast' : 'OK');console.log(message);

當(dāng)三元運(yùn)算符使代碼更易于閱讀時(shí)，最佳做法是使用它。如果邏輯包含許多if...else語句，則不應(yīng)使用三元運(yùn)算符。

總結(jié)

通過本教程的學(xué)習(xí)，我們知道了如何使用 JavaScript 三元運(yùn)算符，您可以將其用作 if-else 語句的快捷方式，使您的代碼更簡潔。

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

【JavaScript 教程】第四章 程序流程02— 三元運(yùn)算符使您的代碼更簡潔