一篇文章帶你了解JavaScript switch
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
Switch是與if ... else ...相同的條件語(yǔ)句，不同之處在于switch語(yǔ)句允許根據(jù)值列表測(cè)試變量是否相等。switch 語(yǔ)句用于根據(jù)不同的條件執(zhí)行不同的操作。
一、Switch 語(yǔ)句
使用switch語(yǔ)句選擇要執(zhí)行的多個(gè)代碼塊中的一個(gè)。
1. 語(yǔ)法
switch(expression) {case n:code blockbreak;case n:code blockbreak;default:default code block}
2. 工作原理
switch 表達(dá)式求值一次。表達(dá)式的值與每個(gè)case的值進(jìn)行比較。如果有匹配，則執(zhí)行相關(guān)的代碼塊。
getDay() 方法返回一周0到6之間的數(shù)字。(Sunday=0, Monday=1, Tuesday=2 ..)。
3. 案例
使用的工作日數(shù)計(jì)算星期的名稱：
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body><p id="demo"></p><script>var day;switch (new Date().getDay()) {case 0:day = "Sunday";break;case 1:day = "Monday";break;case 2:day = "Tuesday";break;case 3:day = "Wednesday";break;case 4:day = "Thursday";break;case 5:day = "Friday";break;case 6:day = "Saturday";}document.getElementById("demo").innerHTML = "今天是：" + day;</script></body></html>
二、關(guān)鍵字
1. break 關(guān)鍵字
原理：當(dāng)找到一個(gè)匹配，工作完成后，它跳出。如果沒有，繼續(xù)進(jìn)行更多的測(cè)試。
一個(gè)break可以節(jié)省大量的執(zhí)行時(shí)間，因?yàn)樗雎粤薭reak開關(guān)塊中所有其他代碼都要執(zhí)行。在最后一個(gè)case塊中沒有必要使用break，因?yàn)闊o(wú)論如何它都會(huì)退出。
<script>function myFunc() {var num = Number(document.querySelector("input").value);var text;switch (num) {case 1:text = "您輸入的號(hào)碼是 1";case 2:text = "您輸入的號(hào)碼是 2";case 3:text = "您輸入的號(hào)碼是 3";case 4:text = "您輸入的號(hào)碼是 4";case 5:text = "您輸入的號(hào)碼是 5";braek;default:text = "執(zhí)行默認(rèn)語(yǔ)句";}document.getElementById('para').innerHTML = text;}</script>
2. default 關(guān)鍵字
default 關(guān)鍵字指定在沒有匹配的情況下運(yùn)行的代碼:
getDay() 方法返回一周0到6之間的數(shù)字。
switch (new Date().getDay()) {case 6:text = "星期六;break;case 0:text = "星期天";break;default: /*如果今天不是星期六（6），也不是星期日（0），寫一個(gè)default信息*/text = "其他星期";}
default 不一定放到最后一個(gè)語(yǔ)句塊：
switch (new Date().getDay()) {default:text = "其他星期";break;case 6:text = "星期六;break;case 0:text = "星期天";}
測(cè)試時(shí)，是星期四，返回其他星期。
注：
如果default不是開關(guān)塊中的最后一個(gè)實(shí)例，請(qǐng)記住以break結(jié)束默認(rèn)情況。
三、相同的代碼塊（優(yōu)化）
有時(shí)你會(huì)希望不同的開關(guān)情況下使用相同的代碼。
在本例中，案例4和5共享相同的代碼塊，而0和6共享另一個(gè)代碼塊:
<script>var text;switch (new Date().getDay()) {case 4:case 5:text = "很快是周末";break;case 0:case 6:text = "這是周末";break;default:text = "期待周末";}document.getElementById("demo").innerHTML = text;</script>
四、總結(jié)
本文基于JavaScript 基礎(chǔ)，介紹了switch語(yǔ)句的相關(guān)使用。通過工作原理的分析 案例的代碼的解析，對(duì)于關(guān)鍵字的難點(diǎn)都做了詳細(xì)的講解。同時(shí)對(duì)代碼進(jìn)行了整合和優(yōu)化。
代碼很簡(jiǎn)單，希望能夠幫助你學(xué)習(xí)。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行