【2023 挑戰賽 Day1】 #JS try...catch 例外處理機制

15th鐵人賽面試題目前端新手村 js

漢堡法師

2023-09-13 13:46:13

511 瀏覽

分享至

哈囉大家！我是 Wendy，一個剛轉職的前端菜鳥，這是我第一次在 iThome 發文，也是參加鐵人賽的第一天，我好興奮啊～

以下這個系列將整理出我從接近 20 個 Jr 前端工程師的技術面試中遇到的重要觀念題，題目的細節將略作修改，保留核心觀念，以致敬並感謝出題者的心血。

參賽的目的是確保我對重要的核心觀念已有所掌握，也希望跟同樣在轉職面試中的朋友有互相砥礪的機會。

如果有路過的前端大大願意停下來、分享你的知識與見解，小菜鳥萬般感激！

那麼就開始囉！

先亮出第一個要討論的 JS 題目(預計用3天討論)

請問下列程式碼執行結果為何？

try {
 throw new Error();
}catch(x){
    var x = 'X'
    var y = 'Y'
    const z = 'Z'
    console.log(`${x} is in the catch`)
    console.log(`${y} is in the catch`)
    console.log(`${z} is in the catch`)
}
    console.log(`${x} is outside the catch`)
    console.log(`${y} is outside the catch`)
    console.log(`${z} is outside the catch`)

一、看懂題目、印出的順序會是什麼?

小菜鳥我第一次看到這個題目困惑了好久，try catch 不是在做異步處理才會出現嗎？
throw new Error() 又是什麼......？
所以讓我們先看懂題目、搞懂執行順序，不然連猜題的機會都沒有了XD

首先，try...catch 是 例外處理陳述式，是流程控制陳述式的一種，而我們常見的 if...else 則是一種條件陳述式。流程控制請見 MDN 文件。

try...catch 的用途是處理「例外情況」（exception）或「錯誤」（error）（兩種稱呼有時候會混用）。我之前的印象停留在 try...catch 是用來搭配異步函數或 HTTP 請求來處理 Promise，在一般同步函數中比較不常見。不過實際上，try...catch 也可以用來處理同步函數中可能出現的「例外情況」或「錯誤」，總之這是一種錯誤處理的機制，而不僅僅是條件式的處理。

（如果是單純的條件式，請交給 if...else 吧）

try...catch 的使用方法

以上基本觀念了解之後，就來好好講一下 try...catch 的使用方法吧。

在 try 區塊中，我們原則上希望它能執行成功，如果沒有執行成功，就會把控制權交給 catch 區塊 作處理。

從 try 切換到 catch 區塊的機制是：

如果在 try 區塊拋出例外（錯誤），控制權會立即切換到 catch 區塊。
如果在 try 區塊中沒有拋出例外，則會跳過 catch 區塊。
如果有 finally 區塊，則會接在 try 或 catch 執行後執行。

以下是 GPT 小助理給我們範例～

try {
  // 在這裡執行可能會引發例外的代碼
  let x = 1 / 0; // 這個操作將拋出一個除以零的例外
  console.log('這行代碼將不會執行'); // 因為上一行拋出例外，所以這一行不會執行
} catch (error) {
  // 在這裡處理例外情況
  console.error('發生了一個錯誤：' + error.message); // 處理例外情況，並顯示錯誤訊息
} finally {
  // 不管是否有例外，這個區塊都會執行
  console.log('這個 finally 區塊總是會執行');
}
console.log('程式繼續執行'); // 即使有例外情況，程式仍然會繼續執行

看出來了嗎？
在這裡的執行順序是： try 區塊 → 拋出例外，try 區域的執行停止，進入 catch 區塊 → catch 區塊 → finally 區塊 → 外部的 console.log

回到最初的題目中，throw new Error() 就是一個直接粗暴地拋出例外（錯誤）的執行，會讓你直接進入 catch 區域。

於是在這個題目的執行順序即是： catch 區塊中的三行 console.log 將按照順序執行，才會接著執行 catch 區塊外的三行 console.log。

好了，我們終於看懂題目了，猜題已經至少可以猜對一半了 XD
讓我們明天繼續了解這個題目的陷阱與巧思吧！