iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
Modern Web

【這些年我似是非懂的 Javascript】系列 第 13

【這些年我似是非懂的 Javascript】Day 13 - 文法 # 趴兔

ASI 自動分號插入

你有想過其他的語言不加分號時他會直接噴你錯,
但是在 JS 你好像有加或是沒加都沒事兒...

Why!?

因為 JS 有名為 ASI ( Automatic Semicolon Insertion ,自動分號插入) 的功能,
也就是你忘記加他就會幫你補上,
但是他並不是幫你所有需要的都加上,
最主要是在"換行"出現時他才會幫你,
他並不會幫你加在一段文字的中間。

主要要注意的兩點

  • 述句區塊(block)後本來就不需要,所以 ASI 也不會幫你加上去。
  • 會涉入的主要情境為使用 breakcontinuereturn 以及 yield

還記得我一開始工作時 Code review 時常被留言一堆的分號沒加上,
心裡想說這真的那麼重要嗎?
但是這樣講又好像不對,
Google 了一堆資訊兩方各有擁護者,直到後來...
我使用了 ESLint + Prettier
直接自動幫我加上一勞永逸!
我再也不會被留一堆留言是因為 Coding Style xDD

如果你還沒使用這兩個美妙的工具還不趕快手刀安裝 xD
但是要注意的一點是... 用過就回不去了。

TDZ 暫時死亡區域

JS 在 ES6 定義了一個新的概念,就叫做 TDZ,主要是在說程式碼的某個變數的參考動作還不能進行的地方,因為該變數還沒達成必要的初始化動作。
簡單來說就是你過早使用變數導致該變數直接噴錯誤如以下範例。

{
    a = 17; //Uncaught ReferenceError: Cannot access 'a' before initialization
    let a; 
}

看起來真蛋疼

try..finally

如果 try 子句內有一個 return 那 finally 還會執行嗎? 那如果執行是先執行還是後執行呢?
請作答!

...

...

...

答案是會執行,但是執行順序是 return 會馬上執行並設定 foo() 的完成值,接著馬上執行 finally 那時候 foo() 才是真的完成最猴才會回傳該完成值給那個 console.log
如下面的範例

function foo(){
    try {
        return 17;
    }
    finally{
        console.log('test')
    }
    
    console.log('never run')
}

console.log(foo()); 
// test
// 17

throw 與上述情況相同,但是當在 finally 子句中如果有 throw 他就會將原本 try 裡面的完成值取代掉變成 finally throw 的東西。

通常在函式中省略 return 就基本上是等於 return; 或是return undefined; ,但是在 finally 的區塊內部會因為你省略 return 而造成將完成值複寫的問題 (但是如果你故意在裡面 return 還是會被複寫就是了)

那...
如果 finally 裡面加上了 break 又會發生什麼事 ...?
先跟你說母湯安餒xD
你會發生的是 break 將會取消掉 return 的完成值,那維護你 code 人就會想要拿刀殺了你

Switch

之前提過這個的用法,基本上就是用來取代 if..else..if.. else 的串鏈這種寫法加的簡潔,
那你知道嗎?

  • switch 包裹的東西和 case 之間的比對動作是用 === 的也就是絕對的值,如果想要用 == 你可以嘗試用下面的寫法。
    const a = "17";
    
    switch(true){
        case a == 18:
            console.log("I\'m 18 or \'18\' ");
            break;
        case a == 17:
            console.log("I\'m 17 or \'17\' ");
            break;
        default:
            // 不會到這兒
    }
    // "I'm 17 or '17' "
    
  • default 是 option 的,而且他不一定要放在最後,如下面範例。
    const a = 10;
    
    switch(a){
        case 1:
        case 2:
            // 不會到這
        default:
            console.log("default");
        case 3:
            console.log("3");
            break;
        case 99:
            console.log("99");
            break;
    }
    // "default"
    // 3
    

    結果會是這樣是因為 switch 找不到相符的值,直接走到 default 但是又沒有 break 所以直接到了 case 3 然後遇到了 break 才停止。

以上


比我預期中讀的進度還要落後很多...
不過沒關係!我們細水長流 (是這樣說嗎xD)
明天開始就換下一本書囉!
範疇與 Closures / this 與物件原型

期待期待~


參考來源:

你所不知道的 JS|導讀,型別與文法 (You Don't Know JS: Up & Going)


上一篇
【這些年我似是非懂的 Javascript】Day 12 - 文法 # 趴萬
下一篇
【這些年我似是非懂的 Javascript】Day 14 - 範疇
系列文
【這些年我似是非懂的 Javascript】34

尚未有邦友留言

立即登入留言