iT邦幫忙

2021 iThome 鐵人賽

DAY 11
1
Modern Web

追求JS小姊姊30天系列 第 11

追求JS小姊姊系列 Day11 -- 流程錯了怎辦?難道要跟D特終老?

  • 分享至 

  • xImage
  •  

前情提要

終於做出時間了,卻又卡在流程問題,這次解決是否能順利回到過去?


:那要怎麼樣避免因為流程錯誤而造成流程執行不完?
D特:有各種方法,像是流程控制、還有透過例外處理來應對

謎之音想知道基本的流程控制可看
(我的夥伴正在寫的流程控制系列[Day08] 流程判斷:if else 與 switch

:剛剛是不是有人講話?
D特:不是我,果然還是趕快離開這個空間比較好....


例外處理可找的辣個 try - catch

先來看看ECMAScript上對於它的描述:

看不懂嗎?沒關係我也是
但至少現在可知道兩件事:

  1. 它被歸類在statement
  2. 它有三個主要的架構**:
try{
    statement(可更多)
}catch(expression){
    statement(可更多)
}finally{
    statement(可更多)
}

公式解釋: try,catch,finally 分別代表?
這次改看MDN怎麼說:

  1. try :

he try...catch statement consists of a try block, which contains one or more statements

在正常情形下,try的內容會按照你所寫程式碼的順序來執行:

let wantToGoBackDay = new Date();
//正確順序為:
//先取得 年 > 月 > 日 > 小時 > 分鐘

try {
    if(!wantToGoBackDay.setFullYear(2021))throw "我想放假QQ";
    wantToGoBackDay.setMonth(8);
    wantToGoBackDay.setDate(21);
    wantToGoBackDay.setHours(10);
    wantToGoBackDay.setMintues(15);
}catch(error){
    
}

這邊我要強迫你先問:上面程式碼內的throw是幹嘛的?
讓MDN來告訴你:

You may throw any expression, not just expressions of a specific type. The following code throws several exceptions of varying types:

關於throw你要知道:

  1. 它回傳各種型別的表達式(expression)
  2. 要透過它做出拋出這個行為,catch()才能接收到。
  3. 它是一個statement

以上一集製作時間的順序出錯為例**,這時錯誤已經被throw拋出了接下來呢?這就是catch登場時刻。

  1. catch :

catch block, containing statements that specify what to do if an exception is thrown in the try block.

上面是MDN對於catch()的解釋:
簡單來說當執行try流程遇到錯誤時,會將錯誤內容拋出,catch()會接收並傳入參數內,接著執行catch(){}的內容,以下是自己目前有用到的:

Q:發生錯誤時印出訊息(console.log())

try{
    fun();
    
}catch(error){
    console.log(error.message);
}
//error,exception都是比較常用的命名

Q:發生錯誤時重新執行程式(像是函式)

function funC(){
    try{
        fun();
    
    }catch(error){
        console.log(error.message);
        funC()
    }
};
  1. finally :

the statements in the finally block execute even if no catch block handles the exception that was thrown.

要注意!! 不論拋出的錯誤是否有catch()去處理,都會執行finally的內容


那今天就到這邊摟!今天分享喜歡的歌是:
周杰倫 Jay Chou【藉口 Excuse】-Official Music Video
https://www.youtube.com/watch?v=KcK8WurGpEQ

星期天的早點休息,是為了後面的追求,明天見。


reference:
  1. JavaScript control and looping structure
  2. [JS] 談談 JavaScript 中的錯誤處理 Error Handling
  3. https://www.javascripttutorial.net/javascript-try-catch/
  4. Control flow and error handling

上一篇
追求JS小姊姊系列 Day10 -- 如果時間能重來,我不想跟工具人聊天(下)
下一篇
追求JS小姊姊系列 Day12 -- 還是沒躲掉,方函式登場
系列文
追求JS小姊姊30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言