提姆寫程式

0%

JS 筆記 - 控制判斷(if、else if、switch)

發表於 更新於 分類於 Disqus：
if 跟 switch 使用的差別

JavaScript Note

if

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

1
2
3
4
5
var name = value;

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

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

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

else if、else

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

1
2
3
4
5
6
7
8
9
10
11
12
var name = value;

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

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

Switch

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

switch 的程式碼如下：

1
2
3
4
5
6
7
8
9
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。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var name = value;

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

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

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

  default:
    ...
    break;
}

實際遇到的jQuery 筆記 - 使用 select 選取 option 的資料，並同步渲染於網頁