三元運算子又稱為條件運算子,語法為 條件 ? 語句1 : 語句2,意即在條件為 true 時會執行語句1,false 則執行語句2,下面讓我們來看幾個簡單的範例。
// 語法:
條件 ? 語句1 : 語句2;
// 範例:
console.log(2 > 1 ? "2比較大" : "1比較大"); // 2比較大
// 三元運算子的條件式 2 > 1 為 true,程式執行 ? 符號後第一個語句
// 所以會執行 console.log("2比較大");
其實在開發中我們會經常結合三元運算子和指定運算子進行有條件的變數賦值,例如可以利用變數值的不同來判斷及格與否或者是否登入。
let output = 2 < 1 ? "2小於1" : "1小於2";
// 三元運算子的條件式為 false,執行語句2 (1小於2)
// 所以會執行 let output = "1小於2"
console.log(output); // 1小於2
let score = 50;
let pass = score > 60 ? "及格了" : "被當了";
console.log(pass); // "被當了"
let num1 = 10;
let num2 = 34;
console.log(num1 > num2 ? "數字一比較大" : "數字二比較大"); // "數字二比較大"
三元運算子也可以層層嵌套,組合為多重條件應用再複雜的情境中,不過因為較難辨別與維護,所以在開發中較少使用。
let a = 10;
let b = 3;
let c = 55;
let max = ((a > b ? a : b) > c) ? (a > b ? a : b) : c;
// 在擁有多組四算符時,會依據括號來判斷先執行哪一組
// 在此範例中會先執行 (a > b ? a : b),若 a 大則回傳 a,b 較大則回傳 b
// 此範例中 a 較大,所以回傳 a,繼續執行程式 a > c ? a : c; 進行 a 和 c 的比較
// c 較大,回傳 c
console.log(max); // 55
在程式中英文輸入的逗號 , 也是一種運算符,主要用來連接多個運算式,例如宣告多個變數時:
// 原始寫法
let a = 10;
let b = 12;
let c = 44;
// 簡寫寫法
let a = 10, b = 12, c = 44;
運算子優先性表示「哪個運算子優先被運算」,是當同一行程式碼有多個運算子時決定計算順序的方式。其實簡單來說和數學的四則運算的規則 - 先乘除後加減、由左到右計算 差不多,也就是說會依照每個運算子的優先序計算,若優先序相同則由左到右順序執行。
// 範例一
let a = 2 + 4 * 5; // 先乘除,後加減
console.log(a); // 22
// 範例二
let b = (2 + 4) * 5; // 括號先算
console.log(b); // 30
運算子的種類繁多,優先性也很複雜,通常我們只需要記得最基本的,而其他明確需要優先計算的可以以括號 () 包裹,確保優先執行就可以了。
| 優先性Precedence | 運算子Individual operators |
|---|---|
| 19 | ( … ) |
| 18 | … . …、… [ … ]、new … ( … )、… ( … )、?. |
| 17 | new … |
| 16 | … ++、… -- |
| 15 | ! …、~ …、+ …、- …、++ …、-- … |
| 14 | … ** … |
| 13 | … * …、… / …、… % … |
| 12 | … + …、… - … |
| 11 | … << …、… >> …、… >>> … |
| 10 | … < …、… <= …、… > …、… >= … |
| 9 | … == …、… != …、… === …、… !== … |
| 8 | … & … |
| 7 | … ^ … |
| 6 | `… |
| 5 | … && … |
| 4 | `… |
| 3 | … ? … : … |
| 2 | … = …、… += …、… -= …、… **= …、… *= …、… /= …、… %= …、… <<= …、… >>= … |
| 1 | … , … |
上一篇:[快速入門前端 41] JavaScript:運算式和運算子 (2) 指定運算子、比較運算子、邏輯運算子
下一篇:[快速入門前端 43] JavaScript:流程控制和區塊
系列文章列表:[快速入門前端] 系列文章索引列表