KuoMin's Blog
0%

JavaScript Chap.6 ：表達式陳述式

Posted on Edited on
在這篇文章會學到 * 什麼是陳述式 * 什麼是表達式 * 知道後有什麼幫助如何應用?

JavaScript Chap.6 ：表達式陳述式

在這篇文章會學到

  • 什麼是陳述式
  • 什麼是表達式
  • 知道後有什麼幫助如何應用?

在學習JavaScript過程中，想必大家都會查看MDN網站，但其中總是有幾個詞語令人摸不著…
statement? expression? condition?
故想寫本篇文章來釐清以下名詞。

先來個懶人包總結：
陳述式 statement: 會執行程式碼，但 不會回傳資料
表達式 expression： 與陳述式相同會執行程式碼，但一定回傳資料
狀態 condition: 是表達式的其中一種，指名回傳布林值(True or False)

什麼是陳述式

陳述式有幾大分類，如：

  1. 宣告（var、function）
  2. 流程控制（block、if…else）
  3. 迴圈（for、for…in）
  4. 其它（import, export）

其特徵都是 會執行程式碼內容，但是都不會回傳資料。

其用處是在於判斷，宣告變數等等功能。

額外特別提出－
函式陳述式，又稱具名函式 (Function Declaration)

1
2
3
function hello(){
    return 'hello'
}

函式陳述式特點為函式都有名稱，例如上述名稱為hello，利用name的window屬性也可以抓到此名稱。

1
console.log(hello.name) // hello

但函式陳述式依然為陳述式，因此是不會回傳資料的。

什麼是表達式

表達式expression，顧名思義就是會表達會回傳一個資料　

會回傳資料!!!
會回傳資料!!!
會回傳資料!!!

很重要所以說三次！！

常見項目如下:

  1. 純值
  2. 變數
  3. 運算子
  4. 執行函式
  5. 正規表達式
  6. 函式表達式

所以舉凡像是 

1
2
3
4
5
6
1 // 純值，表達式
a // 變數，表達式
1+1 // 運算子，表達式
a=1 // 運算子，表達式
a() // 執行函式，表達式
/[A-Z]*/  // 正規表達式，表達式

以上皆是表達式

特別想提的是－函式表達式
這邊就提到兩種很常聽到卻不太懂的名詞

  • 匿名函式：

匿名函式也是一種函式表達式，其特點就是不用命名，且會回傳資料，其使用方式會與宣告變數名稱一同使用，程式碼如下：

1
2
3
const helloName = function (){
 return 'hello'
}

helloName 為變數名稱，需使用此函數時，則加上()，即可呼叫此函式並回傳 hello
而本身function並沒有名稱，且就算多加名稱，也無法被呼叫，為此匿名函式特點，程式碼如下：

1
2
3
4
5
6
const helloName = function helloMe(){
 return 'hello'
}

helloName() // hello
helloMe() // Uncaught ReferenceError: helloMe is not defined
  • 立即函式：
    立即函式，簡稱IIFE全名為Immediately Invoked Functions Expressions
    從字面就能了解是立刻執行此函式，且因為是表達式所以也會回傳資料。
    使用方法為 將函式外部加上小括號（），代表優先執行內部內容，後面再加上()，來呼叫執行此函式。

其範例程式碼如下：

1
2
3
(function (){
 return 'hello'
})()

也因此可以立用此函式特性，將使用到一次的變數寫在其中，使用後立即消去，避免影響到全域變數。

1
2
3
4
5
6
7
8
9
10
11
12
13
var hi = 'hello_outside';
console.log(hi);
(function(global){
    var hi = 'hello_inside';
	global.hi = 'hello_newoutside';
    console.log(hi);
})(window);
console.log(hi);

結果為
// hello_outside
// hello_inside
// hello_newoutside

知道後有什麼幫助，如何應用

再回到本篇的初衷，知道陳述式表達式然後呢？

以下舉　if…else 在MDN的範例:

1
2
3
4
5
6
7
8
9
if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  statement3
// …
else
  statementN

從上述文章就可知道，我們在condition中是要放能回傳 True or False 的表達式，而　statement　是放執行內容

那接著在一題，Switch的範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
switch (expression) {
  case value1:
        //當 expression 的值符合 value1
        //要執行的陳述句
    [break;]
  case value2:
        //當 expression 的值符合 value2
        //要執行的陳述句
    [break;]
  ...
  case valueN:
        //當 expression 的值符合 valueN
        //要執行的陳述句
    [break;]
  [default:
        //當 expression 的值都不符合上述條件
        //要執行的陳述句
    [break;]]
}

從上述可得知，switch後括弧是要放表達式（通常為變數），其用處是要在去跟之後每個case的 value比對，有符合才執行。
但若我想要做上下限比對，或是我的比對條件不只一個，該怎麼執行呢？
可以利用表達式特性，先帶入True讓函式執行，在value中插入表達式（判別運算子），都判定回傳True即符合switch規則執行內部陳述式，範例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//錯誤做法 - 直觀代入變數

switch(bmi){
    case bmi >= 18.5 && bmi < 24::
      bmiStatus =  'normal';
      break;
      
//當代入bmi=20 時 case是回傳True，與20不同，故不會執行 

//正確做法－先代入True
  switch(True){
    case bmi < 18.5:
      bmiStatus = 'overThin';
      break;

//這樣case 也是回傳True，故就會執行內部內容

以上就是本篇內容，希望大家看完後能對MDN內容更加理解。

參考資料: