iT邦幫忙

2023 iThome 鐵人賽

DAY 21
1
Modern Web

GPT 救救我!菜雞小海獺的前端成長之旅系列 第 21

D21 - JS - 基礎 - 流程控制 - 條件判斷與例外處理

  • 分享至 

  • xImage
  •  

來我們一起唸三次:
不回傳的是陳述式、會回傳結果的是表達式
不回傳的是陳述式、會回傳結果的是表達式
不回傳的是陳述式、會回傳結果的是表達式

以下正文開始 O_<

條件判斷(control flow)

條件陳述式是指當條件為真實會被執行的指令。
JS 支援兩種條件陳述式:if...elseswitch

if...else

// 語法
if (指定條件)
  陳述式

// With an else clause
if (指定條件) {
  陳述式 1;
} else {
  陳述式 2;
}

// 使用 else if
if (指定條件 1) {
  陳述式 1;
} else if(指定條件 2) {
  陳述式 2;
} else {
  陳述式 3;
}

// 以賦值為條件
if ((x = y)) {
  陳述式 1;
} else {
  陳述式 2;
}
  • 指定條件為 true 時才會執行陳述式 1,否則會進到 else 執行陳述式 2。

  • 會被視為 false/falsy 的值

    • false
    • undefined
    • null
    • 0
    • NaN(Not-A-Number)
    • " " 空字串
  • 會被視為 true 的值:

    • 除了以上列出的 false 值以外(包含物件),皆為 true
  • 可以使用 else if 組合多組 if...else

  • 需要執行多行陳述式時,使用區塊 { } 包覆。

  • 建議不要用賦值作為條件,因為賦值常和等於搞混。若真要用,請在賦值外加上一組小括號。

來個練習吧!

// 問題 from GPT
// 練習 1:比較兩個數字
/* 問題:請撰寫一個程式,比較兩個數字 x 和 y,
如果它們相等,則輸出 "x 等於 y",否則輸出 "x 不等於 y"。*/
const x = 3;
const y = 5;

if (x == y) {
  console.log("x 等於 y");
} else {
  console.log("x 不等於 y");
}

// 練習 2:判斷成績等級
/* 問題:請撰寫一個程式,根據學生的分數判斷其等級。
如果分數大於等於 90,輸出 "A";
如果分數在 80 到 89 之間,輸出 "B";
如果分數在 70 到 79 之間,輸出 "C";
否則輸出 "D"。*/

const score = 79;

if (score >= 90) {
  console.log("A");
} else if (80 <= score) {
  console.log("B");
} else if (70 <= score) {
  console.log("C");
} else {
  console.log("D");
}

switch

  • switch 會逐一尋找符合運算式的 case 條件並進入陳述句,若都不符合則會進到 default。
// 語法
switch (expression) {
  case value1:
        //當 expression 的值符合 value1
        //要執行的陳述句
    [break;]
  case value2:
        //當 expression 的值符合 value2
        //要執行的陳述句
    [break;]
  ...
  case valueN:
        //當 expression 的值符合 valueN
        //要執行的陳述句
    [break;]
  [default:
        //當 expression 的值都不符合上述條件
        //要執行的陳述句
    [break;]]
}

參數說明:

  • expression 表達式,其結果會與各 case 的條件嚴格配對( === )。
  • case valueN:若 expression 的結果與 case 的 value 符合,則執行 case 內的陳述句,直到 switch 陳述式結束或遇到 break
    • 若符合多個 case,只會執行第一個符合的 case
  • default:expression 比對 case 皆不符合時,會進入 default 並執行陳述句。
    • 通常 default 會是最後一個句子,但並無硬性規定。
  • break 的作用是中止並跳出 switch。
    • Fall-Through:若沒有 break,switch 會繼續執行後續的陳述式(不論 case 是否匹配),直到遇到 break 或switch 語句結束。(因為已經配對到,不會再執行配對,而是直接執行陳述式了)

來個練習吧!

// 問題 from GPT
// 建立一個簡單的計算器,接受兩個數字和一個操作符(+、-、*、/),然後使用 switch 語句執行相應的計算。
const x = 6;
const y = 3;
let operator = "/";
let result = 0;

switch (operator) {
  case "+":
    result = x + y;
    break;
  case "-":
    result = x - y;
    break;
  case "*":
    result = x * y;
    break;
  case "/":
    result = x / y;
    break;
  default:
    result = "請確認輸入符號是否正確";
}

console.log(result);

// 根據給定的月份(1 到 12),使用 switch 語句判斷季節。
const month = 9;
let season = "";

switch (month) {
  case 3:
  case 4:
  case 5:
    season = "春天";
    break;
  case 6:
  case 7:
  case 8:
    season = "夏天";
    break;
  case 9:
  case 10:
  case 11:
    season = "秋天";
    break;
  case 12:
  case 1:
  case 2:
    season = "冬天";
    break;
  default:
    season = "請確認輸入值是否正確";
}

console.log(season);

例外處理(error handling)

寫程式時,難免會出現各種錯誤。為了避免因為錯誤使程式運行中止的情況,需要作一些預防措施。

  • try...catch
    • try:定義了要執行且可能會出錯的區塊
    • catch:定義了處理錯誤的區塊
    • finally:定義了不論是何結果,最終都會運行的區塊
  • throw:定義顯示自訂錯誤的區塊。定義可以是任意表達式、也可創建一個 Error 物件,將其傳給 throw 以拋出錯誤。
// 語法
// try...catch...finally
try {
	// 可能會出錯的 code
} catch (error){
	// 出錯後的處理
	// 使用 error 參數接收錯誤相關資訊
} finally {
	// 不論是否出錯,最後的處理程序
}

// throw
throw err;
throw str;
throw num;
throw new Error('str');

請 GPT 大大給點例子吧!

// 例子 from GPT
// try...catch...finally
try {
  const result = someUndefinedFunction(); // 1. 這段會出錯
  console.log(result);
} catch (error) {
  console.error("An error occurred:", error); // 2. 進到這裡
  // An error occurred: someUndefinedFunction is not defined
} finally {
  console.log("結束"); // 3. 最後到這邊
}

// throw + try...catch
function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero is not allowed.");
  }
  return a / b;
}

try {
  const result = divide(10, 0); // 這裡會拋出錯誤
  console.log(result);
} catch (error) { // 接收錯誤訊息
  console.error("An error occurred:", error); 
  // An error occurred: Division by zero is not allowed.
  }

下面來補之前運算子篇忘記提的三元運算子XD"

三元運算子(Conditional (ternary) operator)

  • 條件後跟著一個問號,若條件為真,執行冒號前段的表達式;若條件為假,則執行冒號後的表達式。
condition ? exprIfTrue : exprIfFalse

參數說明:

  • condition:待計算的表達式/條件
  • exprIfTrue:條件為真時須執行的表達式
  • exprIfFalse:條件為假時須執行的表達式
  • 可能的假值:false、null、NaN、0、空字串 " "、undefined 等

三元運算子可以往右延長,此時等於 if...else 鏈。
雖然鏈狀三元好用,但閱讀不易,請斟酌使用。

// 以下兩個範例相等 code from MDN
// 三元
function example() {
  return condition1 ? value1
    : condition2 ? value2
    : condition3 ? value3
    : value4;
}

// if...else
function example() {
  if (condition1) {
    return value1;
  } else if (condition2) {
    return value2;
  } else if (condition3) {
    return value3;
  } else {
    return value4;
  }
}

來個練習吧!

// 問題 from GPT
// 問題 1: 使用三元運算子,比較兩個數字並找出最大值。
const x = 5;
const y = 3;
const ans = x > y ? "x" : "y";
console.log(`最大值是 ${ans}`);

// 問題 2: 使用三元運算子,確認給定的數字是正數、負數還是零。
const num = 5;
const res = num > 0 ? "正值" 
: num < 0 ? "負值" 
: "等於零";

console.log(`給的數值是 ${res}`);

呼,被傳感冒狀態不佳 ˊ_>ˋ
終於結束這篇惹,繼續加油!


參考資料

  • 流程控制与错误处理 - JavaScript | MDN,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
  • if...else - JavaScript | MDN,https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/if...else
  • switch - JavaScript | MDN,https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/switch
  • JavaScript switch switch 用法 - JavaScript (JS) 教學 Tutorial,https://www.fooish.com/javascript/switch-case.html
  • [JS] Switch Case 的使用 | PJCHENder 未整理筆記,https://pjchender.dev/javascript/js-switch-case/
  • JavaScript 例外處理 try catch finally; exception / error handling - JavaScript (JS) 教學 Tutorial,https://www.fooish.com/javascript/error-handling-try-catch-finally.html
  • try...catch 語法 - JavaScript | MDN,https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/try...catch

上一篇
D20 - JS - 基礎 - 物件 - 2:傳值、傳參考與深淺拷貝
下一篇
D22 - JS - 基礎 - 流程控制 - 循環與迭代
系列文
GPT 救救我!菜雞小海獺的前端成長之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言