iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
Modern Web

想轉職的鯊魚從零基礎開始學習JavaScript系列 第 11

想轉職的鯊魚從零基礎開始學習JavaScript Day-11 ECMAScript Language-概述(二) Statements(述句)與Declarations(宣告)

  • 分享至 

  • xImage
  •  

前言

老實說,我英文並不算很好,認識的詞彙不多,甚至日常看到一個英文句子有一半的辭彙我都不認得,就算逐字翻譯我也不一定有辦法將所有的詞彙組合成一個完整的句子,不然就是組合出來的句子我自己也不懂所以然,所以我的閱讀習慣都比較偏向去找中文資料,像是別人寫的中文文章、中文書籍亦或是被翻譯過後的中文文檔,當這些都找不到的時候,才會去查英文的資料;看到這裡也許一些資深的工程師就在嘲笑我是三流的渣渣,這也是無可厚非,畢竟我也只是一個初學者,我都自嘲自己是不入流的玩家,說我是三流我還覺得有些過譽了,不過也因為認知了自身的不足,沒辦法直接閱讀EMCA262的內容,看到那滿滿的英文文章,不經讓人想退卻,但不妨想想馬克吐溫說的:

Twenty years from now, you will be more disappointed by the things you didn’t do than the ones you did.So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.
二十年後,你會懊悔更多的是那些現在沒做,而不是真的做了的事。所以,拋開繩結,駛離安全的港灣。掌握好你的風向,勇敢的探險,夢想,發現吧。

所以我寫這一系列的文章,正試著從只一個只依賴中文資料膽小鯊,演變成願意嘗試"啃食"EMCA262或其他英文資料的勇敢鯊鯊,以EMCA262基礎向下延伸,或許前面分類有些不嚴謹還請各位客官多多體諒。

鯊語錄

Statements(述句)

什麼是Statements(述句),依據MDN-Statements and declarations的描述:

JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.

JavaScript 的運行是由適當語法的Statements(述句)所構成,
而Statements(述句)又是由眾多關鍵字組合而成,
一句Statements(述句)可跨足多行,並由分號進行多行間的連接。

Statements(述句)種類可分下面幾種:

  • BlockStatement(區塊述句)
    用{}(curly brackets)來包裹其他Statements(述句)或是宣告,
    也就是將多個述句組合成一個複合述句
    在{}內,可以呼叫所有已被被宣告過的東西,並會產生一個新的宣告環境,
    用let var宣告的內容不會汙染到全域,
  • VariableStatement(變數述句)
    即是之前說過的var的宣告,在全域中宣告一個變數,並且初始值是undefined,此類的Statement會有一個Hoist效果,會先宣告這個動作提升至程式碼最開頭。
  • EmptyStatement(空述句)
    在應該放述句的時候什麼都沒放,會用一";"分號代替,
    不過使用EmptyStatement(空述句)的時候建議多放一組註解說明。
  • ExpressionStatement
    即是Expression(運算式),是的運算式也是一種述句
  • IfStatement(if)
    依if(Boolean)的結果(true/false)回傳不同的答案,如果是true則運行A,如果是false則運行B。
  • BreakableStatement
    可執行BreakStatement的述句,可分兩個
    ◎IterationStatement(迴圈)
    DoWhileStatement(do/while迴圈)
    WhileStatement(while迴圈)
    ForStatement(for迴圈)
    ForInOfStatement(for/in迴圈)
    ◎SwitchStatement(Switch)
    依據Switch(運算式)的值,對應case的選項結果。
  • ContinueStatement(continue)
    執行迴圈時使用,可以強制結束該輪迴圈,並進入下一輪迴圈。
  • BreakStatement(Break)
    將整個迴圈強制結束。
  • ReturnStatement(Return)
    將function函式強制結束,並將一個value傳出去
  • WithStatement(with)
    已經被列為LEGACY(遺產),ECMAScript也不建議使用,除非運行 destructuring assignment
  • LabelledStatement(標記述句)
    在回全前面加prefixing(前綴),會配合break或continue
    通常在多層的迴圈中使用,可以跳到指定位置繼續執行/中斷迴圈
  • ThrowStatement(throw拋出)
    使用者自訂的異常狀況處理,通常跟catch一起使用。
  • TryStatement(try...catch)
    常運用於測試,當正常執行時會出現一種結果,當執行錯誤(或是throw事件)時,會出現另一種catch的結果,
  • DebuggerStatement(除錯)
    在程式碼中加入debugger,當執行到debugger的時候,程式碼會立即中止,並直接導引到debugger的地方

Declarations(宣告)

Declarations(宣告)可分為三類,依序是:

  • HoistableDeclaration(有Hoist提升效果的宣告)
    如其名有提升的效宣告,也就是所有的函式的宣告,函式可分下面四種:
    FunctionDeclaration(函式)
    GeneratorDeclaration(生成器函數)
    AsyncFunctionDeclaration(非同步函式)
    AsyncGeneratorDeclaration(非同步生成器函數)
  • ClassDeclaration(Class宣告)
    Class是ES6新增的類別,ClassDeclaration即是對這個類別的宣告。
  • LexicalDeclaration(詞彙宣告)
    let跟const(先前Day-03 變數、宣告與賦值中有提到)

額外補充:Hoisting提升是一個沒有在EMCA細說的概念,可以從MDN-Hoisting
深入了解。

結語

其實我蠻意外的,沒想到JavaScript所有可以看到句子,都被包含在Statements(述句)與Declarations(宣告)裏頭,連一個微小的符號都有一個明確的規範,不過EMCA262說了很多語法的使用與限制,但是在說明上卻讓我吃足了苦頭,要不停的去比對其他資訊才免強擠出一個可以看的解釋。

參考資料

MDN-block
MDN-label
MDN-Hoisting
EMCA262


上一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-10 ECMAScript Language-概述(一)
下一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-12 ECMAScript Language-概述(三)
系列文
想轉職的鯊魚從零基礎開始學習JavaScript31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言