iT邦幫忙

1

從 0 學習 JavaScript 筆記-控制判斷(if、else if、switch)

https://ithelp.ithome.com.tw/upload/images/20191202/201193002YIR6YSOcB.jpg

本篇要進入控制判斷的 if、else if、switch 的練習

if

光看英文單字,if 有如果的意思,在這邊程式碼也是直接使用字面上的感覺。
if 的程式碼如下:

var name = value;

if (name == value) { //判斷式
  ...//陳述式
}

判斷式先判斷小括號內的條件是否符合變數給的值,若相同就會執行陳述式,若不同則不會執行,所以 if 的感覺很直覺,想什麼講什麼就是了。

if 後面的小括號要放比較運算子,也就是 name == value,不能放 name = value,這樣會變成變數值


else if、else

是延續 if 的屬性,倘若 if 內陳述式的程式碼與判斷式不相符,就會直接執行 else if 的陳述式,結尾要用 else

var name = value;

if (condition) { //判斷式
  ... //陳述式
}else if{ 
  ... //倘若第一個陳述式沒有滿足條件,就會執行 else 裡面的程式碼
  ...
  ...
  ... // else if 可以很多程式碼
}else{
  ...//最後結尾會執行 else 的程式碼
};

else 不用滿足條件,可以直接顯示結果,是滿好用的語法


Switch

Switch 的用法跟 ifelse if 有點像,差別是 if 會把所有的程式碼都讀取過,相對渲染會比較慢,效能相對較低,而 Switch 會全部都讀過,但會只先看條件,看到有相符的型別才會再進去讀取相關內容,讀取後執行其他程式碼就不會再存取了,相對效能較高。

switch 的程式碼如下:

switch (key) { //設定一個表達式,且包含條件
  case value: //要先寫一個 case 然後加上**變數名稱**(字串要加引號,不用小括弧),給一個冒號:寫裡面的內容,結尾用分號 ; ,結束有點像 CSS
    ...
    break; //每個 case 都要用一個 break 做結束。

  default: //defalt 用法有點像 else,就如果沒有滿足的條件就會執行這個內容,但其位置可以任意放置,但我會習慣放在最後面,這樣寫程式碼比較有邏輯一點
    ...
    break; // 結束也要用一個 break 當作結束。
}

建立 switch:設立一個表達式,且包含條件,用小括號包起來。
case: 後方會開始比對,如果符合就會執行相關連的程式碼。
break: 每個 case 後方都會補上一個 break,如果讀取到條件相符,就會停止讀取後方的程式碼。


加入 function 到 Switch

  1. 建立變數。
  2. 建立 function。
  3. 帶入 switch,switch 裡面可以帶入多個相同條件的 case。
var name = value;

function name(params) {
  console.log(params);
}

switch (key) {
  case value: //case1
    ...
    break;

  case value: //case2
    name(params); //帶入 function
    break;

  default:
    ...
    break;
}

心得

這篇的觀念要反覆地看,有詢問工程師友人會用在哪些頁面,類似一種驗證機制的會很常用到,還需要多學習跟練習,有發現自己在 function 的執行與應用上觀念還沒有很熟練,要再加油!


尚未有邦友留言

立即登入留言