本教程將深入探討 JavaScript 三元運算符的語法及其常見用法。

JavaScript 三元運算符（也稱為條件運算符）用於執(zhí)行內(nèi)聯(lián)條件檢查，替代 if...else 語句。它使代碼更簡潔易讀，可根據(jù)條件為變量賦值或執(zhí)行表達式。

要點

• JavaScript 三元運算符允許內(nèi)聯(lián)條件檢查，使代碼更短、更易讀。它接受三個操作數(shù)：一個要測試的條件，以及用冒號分隔的兩個表達式。如果條件為真，則執(zhí)行第一個表達式；如果條件為假，則執(zhí)行第二個表達式。
• 三元運算符可用於值賦值、基於條件執(zhí)行表達式以及檢查變量是否為 null 或 undefined。它還可以通過嵌套或鏈接條件在運算符的表達式中處理多個條件，類似於 if…else if…else 語句。
• 雖然三元運算符可以通過替換冗長的 if…else 語句來提高代碼可讀性，但過度使用嵌套三元運算符會使代碼難以閱讀。還應(yīng)注意，三元運算符需要真值分支和假值分支。

語法

三元運算符接受三個操作數(shù)；這是 JavaScript 中唯一一個這樣做的運算符。您提供一個要測試的條件，後跟一個問號，後跟用冒號分隔的兩個表達式。如果條件被認為是真值，則執(zhí)行第一個表達式；如果條件被認為是假值，則執(zhí)行最終表達式。

其使用格式如下：

condition ? expr1 : expr2

其中，condition 是要測試的條件。如果其值為真值，則執(zhí)行 expr1。否則，如果其值為假值，則執(zhí)行 expr2。

expr1 和 expr2 可以是任何類型的表達式。它們可以是變量、函數(shù)調(diào)用，甚至是其他條件。

例如：

1 > 2 ? console.log("You are right") : console.log('You are wrong');

使用三元運算符進行值賦值

三元運算符最常見的用例之一是確定要為變量賦值的值。變量的值通常取決於另一個變量或條件的值。

雖然可以使用 if...else 語句來實現(xiàn)這一點，但這會使代碼更長、更難讀。例如：

const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = 'The numbers array is too long';
} else {
  message = 'The numbers array is short';
}

console.log(message); // "The numbers array is too long"

在此代碼示例中，首先定義變量 message。然後，使用 if...else 語句確定變量的值。

可以使用三元運算符在一行中簡單地完成此操作：

const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';

console.log(message); // "The numbers array is too long"

使用三元運算符執(zhí)行表達式

三元運算符可用於執(zhí)行任何類型的表達式。

例如，如果要根據(jù)變量的值確定要運行哪個函數(shù)，可以使用 if...else 語句執(zhí)行此操作：

if (feedback === "yes") {
  sayThankYou();
} else {
  saySorry();
}

可以使用三元運算符在一行中完成此操作：

condition ? expr1 : expr2

如果 feedback 的值為 "yes"，則將調(diào)用並執(zhí)行 sayThankYou 函數(shù)。否則，將調(diào)用並執(zhí)行 saySorry 函數(shù)。

使用三元運算符進行空值檢查

在許多情況下，您可能正在處理可能已定義值也可能未定義值的變量——例如，從用戶輸入檢索結(jié)果時，或從服務(wù)器檢索數(shù)據(jù)時。

使用三元運算符，您可以通過將變量名放在條件操作數(shù)的位置來檢查變量是否不為 null 或 undefined。

當(dāng)變量是對象時，這尤其有用。如果您嘗試訪問實際上為 null 或 undefined 的對象的屬性，則會發(fā)生錯誤。首先檢查對像是否已設(shè)置可以幫助您避免錯誤。

例如：

1 > 2 ? console.log("You are right") : console.log('You are wrong');

在此代碼塊的第一部分中，book 是一個具有兩個屬性（name 和 author）的對象。當(dāng)對 book 使用三元運算符時，它會檢查它是否不為 null 或 undefined。如果不是——這意味著它有值——則訪問 name 屬性並將其記錄到控制臺中。否則，如果它為 null，則改為將 "No book" 記錄到控制臺中。

由於 book 不為 null，因此書名將記錄在控制臺中。但是，在第二部分中，當(dāng)應(yīng)用相同的條件時，三元運算符中的條件將失敗，因為 book 為 null。因此，控制臺中將記錄“No book”。

嵌套條件

雖然三元運算符用於內(nèi)聯(lián)，但多個條件可以用作三元運算符表達式的部分。您可以嵌套或鏈接多個條件來執(zhí)行類似於 if...else if...else 語句的條件檢查。

例如，變量的值可能取決於多個條件?？梢允褂?if...else if...else 來實現(xiàn)：

const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = 'The numbers array is too long';
} else {
  message = 'The numbers array is short';
}

console.log(message); // "The numbers array is too long"

在此代碼塊中，您測試 score 變量上的多個條件以確定變量的字母等級。

可以使用三元運算符執(zhí)行相同的條件，如下所示：

const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';

console.log(message); // "The numbers array is too long"

首先評估第一個條件，即 score >= 90。

這將一直持續(xù)到所有條件都為假，這意味著 grade 的值為 'F'，或者直到其中一個條件被評估為真，並且其真值被賦給 grade。

結(jié)論

如本教程中的示例所示，JavaScript 三元運算符有許多用例。在許多情況下，三元運算符可以通過替換冗長的 if...else 語句來提高代碼的可讀性。

(後續(xù)內(nèi)容，例如FAQ部分，由於篇幅過長，建議根據(jù)需要單獨處理。)

以上是快速提示：如何在JavaScript中使用三元操作員的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！