iT邦幫忙

0

[快速入門前端 42] JavaScript:運算式和運算子 (3) 三元運算子與運算子的優先性

  • 分享至 

  • xImage
  •  

運算子

三元運算子

三元運算子又稱為條件運算子,語法為 條件 ? 語句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

運算子的種類繁多,優先性也很複雜,通常我們只需要記得最基本的,而其他明確需要優先計算的可以以括號 () 包裹,確保優先執行就可以了。

  • 運算子優先表 (資料來自 MDN)
優先性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:流程控制和區塊
系列文章列表:[快速入門前端] 系列文章索引列表


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言