快速提示：如何在JavaScript中使用三元操作員

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

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

要點

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

語法

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

其使用格式如下：

<code class="language-javascript">condition ? expr1 : expr2</code>

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

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

例如：

<code class="language-javascript">1 > 2 ? console.log("You are right") : console.log('You are wrong');</code>

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

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

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

<code class="language-javascript">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"</code>

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

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

<code class="language-javascript">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"</code>

使用三元運算符執行表達式

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

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

<code class="language-javascript">if (feedback === "yes") {
  sayThankYou();
} else {
  saySorry();
}</code>

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

<code class="language-javascript">condition ? expr1 : expr2</code>

如果 feedback 的值為 "yes"，則將調用並執行 sayThankYou 函數。否則，將調用並執行 saySorry 函數。

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

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

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

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

例如：

<code class="language-javascript">1 > 2 ? console.log("You are right") : console.log('You are wrong');</code>

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

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

嵌套條件

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

例如，變量的值可能取決於多個條件。可以使用 if...else if...else 來實現：

<code class="language-javascript">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"</code>

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

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

<code class="language-javascript">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"</code>

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

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

結論

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

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

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