有時我們需要根據不同條件執行不同的操作。
我們可以使用 if
語句和條件運算符 ?
(也稱爲“問號”運算符)來實現。
if(...)
語句計算括號裏的條件表達式,如果計算結果是 true
,就會執行對應的代碼塊。
例如:
let year = prompt('In which year was ECMAScript-2015 specification published?', ''); if (year == 2015) alert( 'You are right!' );
在上面這個例子中,條件是壹個簡單的相等性檢查(year == 2015
),但它還可以更複雜。
如果有多個語句要執行,我們必須將要執行的代碼塊封裝在大括號內:
if (year == 2015) { alert( "That's correct!" ); alert( "You're so smart!" ); }
建議每次使用 if 語句都用大括號 {}
來包裝代碼塊,即使只有壹條語句。這樣可以提高代碼可讀性。
if (…)
語句會計算圓括號內的表達式,並將計算結果轉換爲布爾型。
讓我們回顧壹下 類型轉換 壹章中的轉換規則:
數字 0
、空字符串 ""
、null
、undefined
和 NaN
都會被轉換成 false
。因爲它們被稱爲“假值(falsy)”。
其他值被轉換爲 true
,所以它們被稱爲“真值(truthy)”。
所以,下面這個條件下的代碼永遠不會執行:
if (0) { // 0 是假值(falsy) ... }
……但下面的條件 —— 始終有效:
if (1) { // 1 是真值(truthy) ... }
我們也可以將預先計算的布爾值傳入 if
語句,像這樣:
let cond = (year == 2015); // 相等運算符的結果是 true 或 false if (cond) { ... }
if
語句有時會包含壹個可選的 “else” 塊。如果判斷條件不成立,就會執行它內部的代碼。
例如:
let year = prompt('In which year was ECMAScript-2015 specification published?', ''); if (year == 2015) { alert( 'You guessed it right!' ); } else { alert( 'How can you be so wrong?' ); // 2015 以外的任何值 }
有時我們需要測試壹個條件的幾個變體。我們可以通過使用 else if
子句實現。
例如:
let year = prompt('In which year was ECMAScript-2015 specification published?', ''); if (year < 2015) { alert( 'Too early...' ); } else if (year > 2015) { alert( 'Too late' ); } else { alert( 'Exactly!' ); }
在上面的代碼中,JavaScript 先檢查 year < 2015
。如果條件不符合,就會轉到下壹個條件 year > 2015
。如果這個條件也不符合,則會顯示最後壹個 alert
。
可以有更多的 else if
塊。結尾的 else
是可選的。
有時我們需要根據壹個條件去賦值壹個變量。
如下所示:
let accessAllowed; let age = prompt('How old are you?', ''); if (age > 18) { accessAllowed = true; } else { accessAllowed = false; } alert(accessAllowed);
所謂的“條件”或“問號”運算符讓我們可以更簡短地達到目的。
這個運算符通過問號 ?
表示。有時它被稱爲三元運算符,被稱爲“三元”是因爲該運算符中有三個操作數。實際上它是 JavaScript 中唯壹壹個有這麽多操作數的運算符。
語法:
let result = condition ? value1 : value2;
計算條件結果,如果結果爲真,則返回 value1
,否則返回 value2
。
例如:
let accessAllowed = (age > 18) ? true : false;
技術上講,我們可以省略 age > 18
外面的括號。問號運算符的優先級較低,所以它會在比較運算符 >
後執行。
下面這個示例會執行和前面那個示例相同的操作:
// 比較運算符 "age > 18" 首先執行 //(不需要將其包含在括號中) let accessAllowed = age > 18 ? true : false;
但括號可以使代碼可讀性更強,所以我們建議使用它們。
請注意:
在上面的例子中,妳可以不使用問號運算符,因爲比較本身就返回 true/false
:
// 下面代碼同樣可以實現 let accessAllowed = age > 18;
使用壹系列問號 ?
運算符可以返回壹個取決于多個條件的值。
例如:
let age = prompt('age?', 18); let message = (age < 3) ? 'Hi, baby!' : (age < 18) ? 'Hello!' : (age < 100) ? 'Greetings!' : 'What an unusual age!'; alert( message );
可能很難壹下子看出發生了什麽。但經過仔細觀察,我們可以看到它只是壹個普通的檢查序列。
第壹個問號檢查 age < 3
。
如果爲真 — 返回 'Hi, baby!'
。否則,會繼續執行冒號 ":"
後的表達式,檢查 age < 18
。
如果爲真 — 返回 'Hello!'
。否則,會繼續執行下壹個冒號 ":"
後的表達式,檢查 age < 100
。
如果爲真 — 返回 'Greetings!'
。否則,會繼續執行最後壹個冒號 ":"
後面的表達式,返回 'What an unusual age!'
。
這是使用 if..else
實現上面的邏輯的寫法:
if (age < 3) { message = 'Hi, baby!'; } else if (age < 18) { message = 'Hello!'; } else if (age < 100) { message = 'Greetings!'; } else { message = 'What an unusual age!'; }
有時可以使用問號 ?
來代替 if
語句:
let company = prompt('Which company created JavaScript?', ''); (company == 'Netscape') ? alert('Right!') : alert('Wrong.');
根據條件 company =='Netscape'
,要麽執行 ?
後面的第壹個表達式並顯示對應內容,要麽執行第二個表達式並顯示對應內容。
在這裏我們不是把結果賦值給變量。而是根據條件執行不同的代碼。
不建議這樣使用問號運算符。
這種寫法比 if
語句更短,對壹些程序員很有吸引力。但它的可讀性差。
下面是使用 if
語句實現相同功能的代碼,進行下比較:
let company = prompt('Which company created JavaScript?', ''); if (company == 'Netscape') { alert('Right!'); } else { alert('Wrong.'); }
因爲我們的眼睛垂直掃描代碼。所以,跨越幾行的代碼塊比長而水平的代碼更易于理解。
問號 ?
的作用是根據條件返回其中壹個值。請正確使用它。當需要執行不同的代碼分支時,請使用 if
。
重要程度: 5
alert
彈窗會出來嗎?
if ("0") { alert( 'Hello' ); }
是的,它會
任何非空字符串("0"
不是空字符串)的邏輯值都是 true
。
我們可以執行下面的代碼來進行驗證:
if ("0") { alert( 'Hello' ); }
重要程度: 2
使用 if..else
結構,實現提問 “What’s the “official” name of JavaScript?” 的代碼。
如果訪問者輸入了 “ECMAScript”,輸出就提示 “Right!”,否則 —— 輸出:“You don’t know? “ECMAScript”!”
在新窗口中演示
<!DOCTYPE html> <html> <body> <script> 'use strict'; let value = prompt('What is the "official" name of JavaScript?', ''); if (value == 'ECMAScript') { alert('Right!'); } else { alert("You don't know? ECMAScript!"); } </script> </body> </html>
重要程度: 2
使用 if..else
語句,編寫代碼實現通過 prompt
獲取壹個數字並用 alert
顯示結果:
如果這個數字大于 0,就顯示 1
,
如果這個數字小于 0,就顯示 -1
,
如果這個數字等于 0,就顯示 0
。
在這個任務中,我們假設輸入永遠是壹個數字。
在新窗口中演示
let value = prompt('Type a number', 0); if (value > 0) { alert( 1 ); } else if (value < 0) { alert( -1 ); } else { alert( 0 ); }
重要程度: 5
使用條件運算符 '?'
重寫下面的 if
語句:
let result; if (a + b < 4) { result = 'Below'; } else { result = 'Over'; }
let result = (a + b < 4) ? 'Below' : 'Over';
重要程度: 5
使用多個三元運算符 '?'
重寫下面的 if..else
語句。
爲了增強代碼可讀性,建議將代碼分成多行。
let message; if (login == 'Employee') { message = 'Hello'; } else if (login == 'Director') { message = 'Greetings'; } else if (login == '') { message = 'No login'; } else { message = ''; }
let message = (login == 'Employee') ? 'Hello' : (login == 'Director') ? 'Greetings' : (login == '') ? 'No login' : '';