iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

重新開始 JavaScript系列 第 11

[Day11] 陳述式與表達式

JavaScript 語句類型可被分為陳述式與表達式,而兩者差別敘述如下:

陳述式 Statement

陳述式是用於命令執行指定的一系列操作,最大的特徵是不會回傳結果

陳述式的類別

陳述式常見的類別有:

  • 流程控制 (Block 區塊、if else、switch)
  • 宣告 (var、let、const)
  • 函數與類別 (function、return)
  • 迭代 (for 迴圈、while)
  • 其他 (debugger、export、import)

詳細類別可看 MDN - 陳述式與宣告

陳述式的範例

利用 Chrome 的開發者工具在 console 上輸入 宣告if 語句,因為陳述式不會回傳值,只會跳出undefined

  • var 宣告

  • if 語句

陳述式的注意事項

陳述式不能回傳結果,因此不能賦值在其他變數上

var nickName = if(1===1) {};
// Uncaught SyntaxError: Unexpected token 'if'

表達式 Expression

表達式又可稱為表示式、運算式,常會透過一些符號(運算子)結合上下語句來運算並會回傳結果

表達式的類型

  • 算術 (ex: 123)
  • 字串 (ex: "string")
  • 邏輯 (ex: True)
  • 主流運算式 (ex: this)
  • 左側運算式 (ex: new)

詳細類別可看 MDN - 運算式與運算子

表達式的範例

利用 Chrome 的開發者工具在 console 上輸入表達式,會回傳結果

範例1

輸入 100+100 會回傳 200

範例2

賦值運算子 為表達式,所以會回傳值

var nickName; // 陳述式

nickName = 'Carol'; // 表達式

若再次在 console 輸入 nickName,會回傳 Carol

所以陳述式、表達式不一定是一個完整的語句,只有其中的片段也是可以稱為表達式或陳述式

函式陳述式與函式表達式

函式也有分為 函式陳述式函式表達式,兩者最大的差異在於使否有提升

Day7 提升 中,也有提到關於函式陳述式與函式表達式的差異

函式陳述式

函式陳述式又稱為具名函式,直接宣告一個函式並給予一個名子,在創造階段時,會先在記憶體中將函式陳述式的所有內容做保留(提升)

function fn() {
    // ...
}

函式表達式

函式表達式又稱為匿名函式,會先宣告一個變數,再使用等號運算子將右邊的函式賦值到左邊變數上,因不會被提升,所以若要利用函式表達式,就必須等到執行階段,函式已經賦予到變數上,才能運行此函式

var fn = function() {
    // ...
}

Block 常誤解的區塊

Block 語句

Block 語句為陳述式,且可以包含陳述式,並以大括號 { } 來界定區塊

{
    陳述式1
    ...
    陳述式n
}

範例

{
    var nickName = 'Carol';
}

Block 不能用變數接收

前面提到 Block 語句為陳述式,而陳述式不能回傳結果,因此不能賦值在其他變數上

// 因是陳述式不能用變數接收,故會報錯

var people = {
   var nickName = 'Carol';
}
// Uncaught SyntaxError: Unexpected identifier

物件實字

若在 Block 內放入表達式,則為物件實字,是 JavaScript 定義物件的其中一種方法

{
    nickName = 'Carol';
}

也因物件實字是表達式所以可以用變數接收

var people = {
    nickName = 'Carol';
}

因 Block 的關係,letconst 作用域只在 Block 內,在 Block 外層是無法取到此變數

// 在 Block 外無法提取變數 nickName

console.log(nickName); // Uncaught ReferenceError: nickName is not defined
{
    const nickName = 'Carol';
}

另外因 var函式作用域 所以在 Block 外層是取的到此以 var 宣告的變數


console.log(nickName);
{
    var nickName = 'Carol';
}

參考文獻

六角學院 - JavaScript 核心篇

MDN - 陳述式與宣告

MDN - 運算式與運算子


上一篇
[Day10] ASI - 自動插入分號
下一篇
[Day12] JavaScript 的動態型別
系列文
重新開始 JavaScript31

尚未有邦友留言

立即登入留言