【重溫基礎】2.流程控制和錯誤處理

本文是 重溫基礎 系列文章的第二篇，須要讓本身靜下心來，學習，養成好習慣。

系列目錄：

• 【複習資料】ES6/ES7/ES8/ES9資料整理(我的整理)
• 【重溫基礎】1.語法和數據類型

本章節複習的是JS中的控制流語句，讓咱們能實現更多的交互功能。

注意一點：在ES6以前，JS是沒有塊做用域的，若是在語句塊外部聲明的變量，若是在塊內部聲明一個相同名稱的變量，那麼程序將取後聲明的這個變量的值：

var a = 1;
{
    var a = 2;
}
a; // 2

可是ES6開始，用let聲明的變量是塊做用域的：

let a = 1;
{
    let a = 2;
}
a;  // 1

1.條件判斷語句

用於根據指定條件返回結果，常見的是if...else和switch：

if...else語句

若條件爲真，則執行if後面的語句，若條件爲假，則執行else後面的語句：

if(condition){
    // do something
}else{
    // else 爲可選
    // do something
}

False等效值：
在JS中下面的值經常被計算爲false

• false
• undefined
• null
• 0
• NaN
• 空字符串（""）

注意：
不要使用原始布爾值true和false 與 Boolean對象的真和假混淆：

let a = new Boolean(false);  // Boolean {true}
if (a);         //  永真
if (a == true); // 永假

2.switch語句

經過匹配表達式的值到每一個case標籤，若匹配成功則執行相關語句：

switch ( 'leo' ){
    case 'pingan':
        // do something
        break;   // 可選
    case 'leo':
        // do something
        break;
    default:  // 都不匹配 則執行默認
        // do something
        break;
}

break爲可選，目的用於保證在正確匹配後，能跳出程序的switch語句，並繼續執行其餘代碼，若沒有break則程序會繼續執行下一個case語句。

3.異常處理語句

當throw語句拋出的異常，咱們可使用try...catch捕獲並處理，這裏須要先介紹兩個概念：

throw語句：

用於拋出異常，後面能夠是任何表達式：

throw "error !";
throw 404;
throw {msg: 'err'};

try...catch語句：

用於捕獲異常，try後面是程序正常時候執行的程序，catch後面是當前面有錯誤拋出的時候執行，而且捕獲錯誤信息做爲參數，而且在catch塊執行完成，參數不可再用。

function f(){
    throw 'test error!'
}
try{
    f();
    console.log('success');
}catch (err){    // err 爲前面返回的錯誤信息
    console.log(err);
    console.log('failed');
}
// test error!
// failed

一般在try...catch後還有一個finally語句塊，用於不論前面是否有報錯，都會執行finally語句：

try{
    // do something
}catch(err){
    // do something
}finally{
    // do something
}

try...catch經常也用在作網絡請求的狀況下：

function getData (){
    try{
        let a = fetch(url);
    }catch(err){
        console.log(err);
    }
}

參考資料

1.MDN 流程控制與錯誤處理

---

本部份內容到這結束

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	https://github.com/pingan8787...
JS小冊	js.pingan8787.com

歡迎關注微信公衆號【前端自習課】天天早晨，與您一塊兒學習一篇優秀的前端技術博文 .