控制判斷(運算子、if、switch)

JS筆記

Lizzie

Published in

莉織小姐的程式小市集

6 min readMay 21, 2020

此系列轉移自我的Gitbook學習筆記

比較運算子

1.==、!== 用法

==:用 == 去判斷兩個值是否相等時，解譯器會自動忽略型別（字串類型、數字類型）的不同，而直接判斷內容是否相等。

!==:不絕對等於（值和類型有一個不相等，或兩個都不相等）

2.嚴謹模式

===:絕對等於（值和類型均相等），如果使用 ===則能先判斷型別，再判斷內容。

1==”1" →true

1 ===”1” →false

邏輯運算子

通常在判斷式裡與布林值一起使用。
包含以下三種符號：

&&：and，連接兩個以上的條件，全部條件成立才會回傳 true
||：or，連接兩個以上的條件，只要其中一個條件成立就會回傳 true
!：not，可以把回傳值轉成相反的，例如下面的程式碼

console.log(1>6);
// false
console.log(!(1>6));
// true

注意，判斷兩個以上的條件時，條件跟條件之間必須用 && 跟 || 連接。我有時候會忘記這件事 orz

var a = 5< 6< 7; //錯誤寫法
var b = 5<6 && 6<7; //正確寫法

判斷式

判斷式是 JavaScript 用來控制流程的，當指定的條件成立時，就會執行後續的指令。判斷式的語法有兩種：if...else 和 switch。

if…else

if 後面的小括號內，為條件式；當條件成立時會執行大括號內的程式碼，稱為陳述式。如果在條件不成立的時候，也想要執行特定的動作，就在 if 大括號外面使用 else 語法。

if (條件，由比較運算子或邏輯運算子組成){
  如果條件成立，就會執行這裡的程式碼;
} else {
  如果條件不成立，就會執行這裡的程式碼;
}

if…else範例

e.g.1var hungry = ‘飢餓’;if (hungry == ‘飢餓’) {console.log(‘我現在好餓’);} →我現在好餓e.g.2‌//當未出現錯誤，卻無顯示時， 用console.log（）檢查是否符合條件var hungry = ‘飽足’;console.log(hungry == ‘飢餓’); //檢查if (hungry == ‘飢餓’) {console.log(‘我現在好餓’);}e.g.3//不符合if條件， 顯示false時， 就不跑裡面的程式碼，而會無條件執行else裡的程式碼var hungry = ‘飽足’;if (hungry == ‘飢餓’) {
console.log(‘我現在好餓’);} else {console.log(‘我現在一點都不想吃東西’);console.log(‘我們走吧！’);}→我現在一點都不想吃東西 →我們走吧！

else if

當判斷情境更複雜時，這時 if...else 就可以搭配 else if，用來新增條件判斷。

if(條件一){
  如果條件一成立，就執行選項A;
} else if (條件二){
  如果條件一不成立但條件成立，就執行選項B;
} else{
  如果條件一跟二都不成立，就執行選項C;
}

if…else + else if範例

var full = 8
// 飽足程度 1~10
function eat(food){
  console.log('我現在要吃'+food);
}
if (full<=3){
  eat('披薩');
  //飽足程度小於等於 3 時，呼叫帶入'披薩'作為參數的 eat 函式
} else if (full<=7 && full>3){
  eat('沙拉');
  //飽足程度小於等於 7 且大於 3 時，呼叫帶入'沙拉'作為參數的 eat 函式
} else{
  console.log('我超飽不想吃東西');
}

switch

原理：首先設置表達式 n（通常是一個變數）。隨後表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。使用 break 來阻止代碼自動地向下一個 case 運行。

switch(參數){
case 條件一 :
  參數與條件一符合，執行相關的程式碼;
  break;
  // 每個 case: 後方都會補上 break; 來阻止已完成的區塊在後方繼續執行
case 條件二 :
  參數與條件二符合，執行相關的程式碼;
  break;
default:
  如果沒有任何一個 case: 符合參數，就執行相關的程式碼;
  break;
}

觀念

switch 中 case的判斷是===的判断，即數據類型和值的雙重判斷，這點要注意。

另外switch的判斷條件可以是String 、Number、Boolean、null、undefined

注意

switch 後面小括號內的參數，是跟各條件比較的基準，如果參數剛好與 case 後面的值一樣，就面執行 case 區塊內的指令。而 default 的區塊就是當上面所有 case 都不成立的時候會執行。每個 case 區塊都應該加上 break 作為結束，break 的用途是停止執行後面的程式碼。如果不加 break，switch 中的每一個 case 都會執行。

Switch VS If else

使用

if(變數)，其變數如不成立，不會跑裡面的程式

switch(變數)，不管變數會不會成立，都會先比對條件

效能

If else瀏覽器在渲染或編譯的時候，會全部跑一次，所以在編譯的速度，和效能上，如果條件很多的情況下，會比Switch效能差。因為Switch只會檢視case有無符合，才會去跑程式碼，而不是裡面的東西都檢視過一次。

這兩個的效能取決於使用方式:

當是一個範圍的時候, ex 介於某區間，大於小於多少 — ->用 if else

當是一個特定的明確 case 做比對時 — ->用 switch

程式範例

//測試 switch語句，當 兩種條件不同時，但為同一個結果，比如下面的10或者11，都會走 alert("10或者11") 這裡
function testSwitch(){
  var number = document.getElementById("same").value;
  number=parseInt(number);
  switch(number){
      case 1:
      alert("1");
      break;      case 10:
      case 11:
      alert("10或11");
      break;    default:
      alert("不是1、10或11");
  }
  
  
}

快速判斷是否為某個區間範圍的值，用 switch( true){ }

也就是當下面某一個 case 的條件為 true 就顯示對應的結果