JS 中的三元運算子：您需要了解的一切

什麼是三元？

三元運算子是一個 javascript 運算符，自 2015 年 7 月起可跨瀏覽器使用。它是 if/else 語句的簡寫替代方案。此運算符廣泛應用於 Java、C、Python 等不同的程式語言中，但本文的重點將放在 javascript 上。

讓我們來看看三元運算子的一般語法。

condition ? ifTrue : ifFalse

從上面的範例可以看到，三元運算子相應地替換了 if 和 else 語句，用 ?和 : 符號。將檢查問號左側的條件。如果為真，則第一個表達式位於 ? 之間並且 : 標記將被執行。如果為 false，則執行 : 符號後面的最後一個表達式。

它是如何運作的？

為了理解三元運算子的工作原理，我們將其與常規 if/else 語句進行比較。
下面的 Javascript 程式碼將有條件地將字串記錄到控制台。

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

現在，讓我們使用三元運算子重寫此程式碼。

let a = 10
a == 10 ? console.log("Variable is ten!") : console.log("Variable is not ten!")

此程式碼區塊中的三元運算子按照我們想要的方式有條件地記錄字串。但是這個語句還有更好的寫法。
三元運算子不僅執行表達式，還傳回值。因此，我們可以用一種處理同一個 console.log 語句中兩個不同值的方式來寫該語句，而不是使用運算子來處理兩個不同的 console.log 表達式。
例如：

let a = 10
console.log(a == 10 ? "Variable is ten!" : "Variable is not ten!")

這行的輸出將與我們之前寫的其他三元表達式完全相同。但這段程式碼更加緊湊，易於閱讀。

我們可以使用三元運算子有條件地為變數賦值。讓我們來看一個包含常規 if/else 語句的範例，然後使用三元再次編寫它。

let a = 10
let b
if(a === 10){
    b = a * 5
}else{
    b = a * 2
}

如果 a 是 10，則程式碼區塊會將其乘以 5，否則會將變數乘以 2，並且在這兩種情況下，都會將其分配給 b。
使用三元運算子的替代方案如下所示：

let a = 10
let b = a === 10 ? a * 5 : a * 2

如您所見，為這樣的基本操作編寫單行程式碼會更方便。

嵌套條件

有時我們必須在彼此內部使用多個 if/else 條件。三元運算子可用於連結條件。

let a = 5
if(a === 1){
    console.log("1")
}else if(a === 2){
    console.log("2")
}else{
    console.log("a is not 1 or 2")
}

上面顯示的條件鏈可以使用三元運算子表示，如下所示：

let a = 5
console.log(a === 1 ? "1" : a === 2 ? "2" : "a is not 1 or 2")

正如你所預料的那樣，這很容易變得非常混亂。這就是為什麼不需要在複雜的條件語句中使用三元運算子。

React 中的三元

如果您之前建立過 React 應用程序，您可能知道條件渲染是一個重要的主題。三元運算子使這個操作變得更容易。讓我們來看看 React 官方頁面的範例。
這是編寫聲明的常規方式：

condition ? ifTrue : ifFalse

這是相同的語句，但使用三元運算子。

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

正如你所看到的，它看起來好多了。因此，有時使用三元編寫語句是更乾淨、更好的方法，尤其是在使用 React 時。但在某些情況下，三元運算子會使程式碼更難閱讀。

您認為在哪些其他情況下我們必須使用或避免三元運算子？請在評論中讓我知道您的想法！

感謝您的閱讀。
請查看這些連結以進一步閱讀。

• 有關三元運算符的更多資訊：條件（三元）運算子 - MDN Web 文檔
• 有關 React 中條件渲染的更多資訊：條件渲染 - React

以上是JS 中的三元運算子：您需要了解的一切的詳細內容。更多資訊請關注PHP中文網其他相關文章！