運用條件運算符將你的 if 語句縮短為一行代碼

由基礎開始——if 語句

運用條件語句，比如 if，當 if 語句滿足的情況下，允許我們執行指定一些代碼塊

比如下面的例子

person 對象包含 name，age，driver 屬性

let person = { name: 'tony', age: 20, driver: null };

我們想測試如果 person 的年齡大于等于 16。如果這個是真，他們年齡已經足夠駕駛車和司機應該認可。如果這個不是真的，司機應該否認。

我們可以使用一個 if 語句來完成這個例子：

if (person.age >= 16) { person.driver = 'Yes'; } else { person.driver = 'No'; }

但是，如果我告訴你，我們可以用一行代碼完成同樣效果呢？如下所示：

person.driver = person.age >=16 ? 'Yes' : 'No';

這個較短的代碼具有跟 person.driver = 'yes' 一樣的結果。

既然你已經了解到條件三目運算符的執行過程，接下來，我們就探索它是如何起作用的。

條件(三目)運算符

首先，了解下特殊的 if 語句的語法

if (?condition?) {?value if true;?} else {?value if false;?}

現在，三目運算如下：

condition???value if true?:?value if false

注意點：

condition 是真正需要驗證的。條件的結果應該是 true 或者 false 或者至少強制轉換成布爾值。

? 將條件和 true 值分開。如果 condition 的值是 true，任何介于 ？ 和 : 之間的都將會執行。

最后一個冒號 :。如果 condition 的值是 false。冒號后的代碼將會執行。

案例——司機年齡

我們將會花費一些時間重新思考文章中最初的例子：

let person = { name: 'tony', age: 20, driver: null };

person.driver = person.age >=16 ? 'Yes' : 'No';

注解最重要的部分是執行的順序。添加一些圓括號幫助你虛擬代碼的執行順序：

person.driver = ((person.age >=16) ? 'Yes' : 'No';)

正如你們所希望的，首先是檢查條件來判斷 person.age >= 16 是 true 還是 false。

因為 20 是大于 16 的，當前值是 true。如下所示：

person.driver = (true ? 'Yes' : 'No';)

因為我們的條件語句的條件是 true，將返回介于 ? 和 : 之間的值。在當前案例中，也就是 'Yes'。

既然我們已經獲取到返回的值，最后將要做的事情是設置其等于我們的變量:

person.driver = 'Yes';

非常棒！現在讓我們繼續一些更加復雜的例子。

案例——學生價格

在這個例子中，我們針對一個電影院編程。電影院提供兩種票價：普通人$12，學生$8.

創建一個變量記錄顧客是學生還是其他：

let isStudent = true;

通過變量，我們可以使用三目元算相應地改變價格：

let price = isStudent ? 8 : 12

console.log(price); // 8

因為我們 isStudent 的布爾值是 true，三目元算返回的變量 price 的值是8。

案例——嵌套三元

但是，如果上述的電影院對學生和老年人打折呢？

我們可以運用三元嵌套運算符來測試多個條件。

針對這個場景我們假設票價：普通人$12，學生$8，老年人$6。

這里將展示針對老年的代碼片段：

let isStudent = false; let isSenior = true;

let price = isStudent ? 8 : isSenior ? 6 : 10

console.log(price); // 6

這段代碼將有很多內容，所以中斷下：

首先檢查我們的顧客是否為學生。如果 isStudent 是 false，只有第一個 ： 后的代碼執行。在：后，我們還有一個條件語句：

第二個條件語句是驗證 isSenior ——如果是 true，只有介于 ? 和 : 之間的代碼執行。

price 的值是6，然后打印在屏幕上。

案例——多元運算

多元運算運行在一個三元運算中是可能的。為了做到這些，我們必須使用逗號分隔運算表達式。當然，你也可以使用圓括號講你的代碼分組：

let isStudent = true; let price = 12;

isStudent ? ( price = 8, alert('Please check for student ID') ) : ( alert('Enjoy the movie') );

在以上的例子中，我們的電影 price 已經設置為 $12。如果 isStudent 是 true，我們調整價格為 $8，然后彈出一個警告來讓收銀員核對學生證。如果 isStudent 是 false，以上的代碼將會跳過，并僅僅彈出觀影愉快。

總結

以上是生活随笔為你收集整理的html三元运算符 模板,JavaScript ——条件 (三元) 运算符介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。