iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Modern Web

JavaScript初心者ノ研究日記。系列 第 9

九日目:JavaScript switchノ章

OHa (U 'ᴗ' U)✧ 我是 SONYKO
今天要講控制判斷用的switch。
 
說到switch ,因為一直坐著寫code感覺不太好,所以我買了健身環。
想聽健身環感想的可以留言給我
 
☞ Let's switch ✧


☀switch 和 if else 差在哪裡?

我想先講這個,因為我也是平常都只會用if else,會有疑問說到底什麼時候才要用switch?
if else 很方便 為什麼還要多一個 switch 判斷呢?
 

  1. 效能上差異

    除非開發專案非常之大,不然兩者在效能上的差異不怎麼明顯。
    可以參考這篇文章
     

    • switch :不會檢視所有條件,會直接跳到符合條件,去執行他的程式碼。
    • if else:會檢視所有條件,如果有條件符合的,才會去執行那個程式碼。
       
      你可以把switch 想成去逛街超有目的,會直接殺去那間店、買完、結束這回合!的朋友,
      然後if else 是會說「我想逛完全部再決定要買什麼~」的朋友。
      所以當然是 switch型朋友比較有效率
         
  2. 用法上的差異

    很多程式語言也都有 if else 和switch ,可能也會看到有人說 switch 寫法很死板、用 if else 就可以代替他了,那到底什麼時候要用 switch ?什麼時候用 if else ?
     

    • 有「比較」的時候 用 if else
      day 7 介紹了 if else ,範例中也都是一堆比較,像是 if ( a > b && b ≥ c )這種,需要進行比較判斷的,用 if else 就會比較妥。
       
    • 有很多條件的時候 ,可以用 switch
      什麼叫做有很多條件? 像是「過多的 else if 」,不知道這樣好不好懂。
       
      var fruit = '榴蓮'
      
      switch(fruit){
      	case '蘋果':
      		console.log('蘋果 $30')
      			break ;
      	case '水蜜桃':
      		console.log('水蜜桃 $200')
      			break ;
      	case '葡萄':
      		console.log('葡萄 $100')
      			break ;
      	case '榴蓮':
      		console.log('榴蓮超臭,跟我買我貼你500')
      			break ;
      	case '草莓':
      		console.log('草莓 $12300')
      			break ;
      	case '香蕉':
      		console.log('香蕉 $5')
      			break ;
      	case '奇異果':
      		console.log('奇異果 $220')
      			break ;
      	case '櫻桃':
      		console.log('櫻桃 $300')
      			break ;
      	case '香瓜':
      		console.log('香瓜送你')
      			break ;
      	case '木瓜':
      		console.log('通通拿去做木瓜牛奶')
      			break ;	
      }
      
      上面範例,大家可以想像如果用 if ... else 來寫,code 應該會醜翻天。
      switch 效能好,程式碼又簡潔,如果今天是要做大量判斷、但又是超級簡單的判斷,就建議用switch 。
       
    • 撰寫的程式碼是很固定的東西」。
      像是「 陰天、雨天、晴天 」,或 「 紅燈、黃燈、綠燈 」 這類的。

 


☀switch 程式碼介紹

上面範例有沒有看到一堆 case 跟 break ,看起來很中二。
我們就來看看他的構造:

// var 變數 = 比對項目

switch ( 變數 ){
	case'第一項比對':
	 // 要執行的程式碼
	break ;  
}

// case : 其實就跟英文一樣,就是要放案例。
// case下面放「如果符合這項案例,要執行什麼東西」
// break 是終止 的意思。如果這項case 符合,將不會執行之後的case。

 
✧ 當 case ' 條件 ' === ' 變數的値 ' ,才會執行以下程式碼 。要注意這邊的等於是嚴格等於歐。
 
switch 程式碼範例:

var pokemon = '噴火龍'

switch (pokemon) {
	case'小火龍':
		alert('哇a噴火龍勒?')
			break ;
	case'噴火龍':
		alert('使出噴射火焰!')
			break ;
	case'火恐龍':
		alert('哇a噴火龍勒?')
			break ;
	case'暴鯉龍':
		alert('哇a噴火龍勒?')
			break ;
} 

上面程式碼只會執行 alert ( ' 使出噴射火焰 ' )。
不知道各位有沒有掌握度有沒有 87% 了?
 
 
我想你可能會好奇,switch 沒有 else功能嗎? 如果全部都不符合的話。
 

有!(U 'ᴗ' U)

 
我們來看下面這段:

var dinner = '麥當勞'

switch(dinner){
	case '肯德基':
		console.log('卡拉雞腿堡不加醬')
			break ;
	case '丹丹':
		console.log('鮮脆雞腿堡不加醬')
			break ;
	case '711':
		console.log('龍蝦沙拉御飯糰好吃')
			break ;
	case '蒸餃':
		console.log('花素蒸餃讚')
			break ;
	case '海底撈':
		console.log('要排兩個小時')
			break ;

	default:  // 當所有項目都不符合時執行
		console.log ('所以為什麼沒有麥當勞啊')
			break ;
}

default 那段的意思就跟 else 是一樣的。當所有項目都不符合時,就執行它。
 
  


☀如果沒有 break 的話?

如果沒有 break 的話 —— 他會一直執行到有break 的地方才停止
 
範例:

let pokemon = '卡比瘦' 

switch(pokemon){
		case'小火龍':
			console.log('這是小火龍')
		case'火恐龍':
			console.log('這是火恐龍')
		case'卡比瘦':   // <--- 從這
			console.log('很胖')
		case'皮卡丘':
			console.log('皮卡皮卡')
		case'噴火龍':
			console.log('哇a噴火龍')
		break;      // <--- 執行到這
		case'呆呆獸':
			console.log('很呆')
		break;
}

/*  console.log 會顯示:
		 "很胖"
		 "皮卡皮卡"
		 "哇a噴火龍"
*/

可以看到 我輸入卡比瘦,卻連下面的皮卡丘跟噴火龍都印出來了。
因為我到噴火龍case 才加入 break 。
 
  

以上是 switch 的介紹 (U 'ᴗ' U)
如果有觀念不正確的地方可以留言給我
我會再訂正文章! じゃあね 
 
 


(U 'ᴗ' U) SONYKO的 前端日文小教室 ♡

 
今天講到 switch ,來介紹一點日文念法。
再補充一些題外單字♫
 

平假名與片假名的差異?

一直忘記說明到這點。
沒學過日文的人可能會很疑惑,日文的平假名和片假名是什麼?
 

  • 平假名:日本原生的 ... 像我們的注音 一樣的東西。
  • 片假名:外來的東西。正確說法是「外來語」。
     
    大家不會日文但總有聽過 羅賴把(螺絲起子),這個就是日本的外來語!
    羅來把 ← ドライバー ← driver
    日本的外來語有英文、德文、法文甚至西班牙文,他們都會寫成片假名歐。
     
     

switch 程式碼相關日文:

音檔

No 日文(or英文) 假名 中文 羅馬拼音
1 switch スイッチ Su i cchi
2 case  ケース  Ke~ Su
3 break ブレーク Bu Re 〜 Ku
4 default デフォルト De Fo Ru To
5 条件分岐  じょうけんぶんき 條件分支 Jou Ken Bu n Ki
6 match  マッチ  配對 Ma cchi
7 該当  がいとう  符合條件 Gai Tou
 
 

前端會用到ㄉ日文:

No 日文 假名 中文/英文 羅馬拼音
1 メンテナンス めんてなんす 維護、維修 Men Te Nan Su
2 処理 しょり ( 程式方面的 )資料處理  Sho Ri
3 速度 そくど (資料處理)速度  Soku Do
4 モバイル もばいる mobile 手機 Mo Ba I Ru
5 スマホ すまほ SmartPhone 智慧型手機 Su Ma Ho
6 タブレット たぶれっと tablet 平板 Ta Bu Re tto
7 パソコン ぱそこん Personal Computer 電腦 Pa So Kon
8 レスポンシブ れすぽんしぶ Responsive響應式 Re Su Pon Shi Bu
 
* 我們中文說的 「效能」,日文是說 「処理速度」(U 'ᴗ' U)
 

上一篇
八日目:JavaScript 函式function 関数ノ章
下一篇
十日目:JavaScript 陣列Array 配列ノ章
系列文
JavaScript初心者ノ研究日記。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言