### 隱含的強制轉型 #### 算術運算子 ``` - 兩個數字相加是數學加法。 - 任何一個操作數是字串,結果就是字串連接。 - 其他類型會根據情況進行轉型。 ``` > [time=Fri, May 24, 2024 3:42 PM] 1. number + string 強制轉為string  2. number -*/%** string 強制轉為number,轉不了則結果為NaN   3. number +-*/%** boolean 強制轉為number(true會是1,false會是0)  4. string+boolean 強制轉為string  5. string -*/%** boolean 強制轉為number,true轉為1、false轉為0   ### 補充:undefined/null/NaN #### undefined 代表「沒有定義」或「沒有值」  #### null 代表「空值」   #### NaN 無法表示的數值(number) 不等於任何值,也不等於自己  ### 比較運算子 1. number {OP} string string強制轉為number 空字串會轉為0 非數字會轉為NaN    建議當不同型別的變數需要進行比較時,自己去使用明確的強制轉換,不要讓系統自動使用隱含轉換。以下範例程式: ``` let age = prompt('安安請問你幾歲呀'); let legal = 18; let illegal = age < legal; if(illegal){ alert('你是未成年小寶貝,不能買煙喔'); }else{ alert('可以買煙呀你') } ``` 在prompt輸入數字,可以被判斷式判斷並輸出alert。 但會有一個bug是:在prompt輸入無法被轉為數字的字串,例如'Hey',於是這種會被轉為NaN,於是不會跑進if(illegal)的判斷式,於是就會跑出可以買煙。 ->因此這個地方必須使用明確強制轉換,將age轉為number,並寫出一個“無法被轉為數字”時的條件 ``` let age = Number(prompt('安安請問你幾歲呀')); if(isNaN(age)){ alert('請輸入正確的年齡啦') } else if(age < 18){ alert('你是未成年小寶貝,不能買煙喔'); }else{ alert('可以買煙呀你') } ``` 2. boolean {OP} number boolean強制轉為number 非數字會轉為NaN  3. boolean {OP} string 強制轉為number 空字串會轉為0 非數字會轉為NaN  4. string {OP} string string強制轉為ascii code 會從最左邊第一個字母開始比,順序參照下表   ### 邏輯運算子 1. && 代表 and:全部皆為 true,才是 true | x | y | x&&y | | -------- | -------- | -------- | |true|true|true| |true|false|false| |false|true|false| |false|false|false| ```javascript! JavaScript 規則:由左到右,回傳第一個是 false 的值 若都是 true,回傳最右邊第一個值 ```    ```javascript! 1 && false && 0 // 回傳 false '' && 1 // 回傳 '' 1 && 2 && 3 // 回傳 3,都是 true 回傳最右邊第一個值 ``` 2. || 代表 or:其中一個是 true 就是 true | x | y | xIIy | | -------- | -------- | -------- | |true|true|true| |true|false|true| |false|true|true| |false|false|false| ```javascript! JavaScript規則:由左到右,回傳第一個是 true 的值 若都是 true,回傳最右邊一個值 ```    非空字符串都会被解释为真值 3. ! 代表:not、相反 | x | !x | | -------- | -------- |true|false| |false|true|  ### 判斷式 if...else...條件判斷 1. if(條件)->當符合此條件(為true) `一組只有一個` 2. else...if->當if條件不符合,卻符合此條件(為true)時 `一組可以有多個` 3. else->當所有if和else if 條件都不符合時 `一組只有一個` 只有if ``` if(A條件){ //做某件事 } ``` 只有if、else ``` if(A條件){ //做某件事 }else{ //做某件事 } ``` 有if、else if、else ``` if(A條件){ //做某件事 }else if(B條件){ //做某件事 }else{ //做某件事 } ``` 有if、多個else if、else ``` if(A條件){ //做某件事 }else if(B條件){ //做某件事 }else if(C條件){ //做某件事 }else if(D條件){ //做某件事 }else{ //做某件事 } ``` 範例1:購物網站跳出警訊 ``` //消費者送出點單,判斷是否有買酒 let buyBeer = true; if(buyBeer){ window.alert('提醒你,喝酒後不要開車喔'); } // 送出商品 ``` 範例2:是否成年判斷 ``` let age = prompt('安安請問你幾歲呀'); let legal = 18; let illegal = age < legal; if(illegal){ alert('你是未成年小寶貝,不能買煙喔'); }else{ alert('可以買煙呀你') } ``` 範例3:投票類別判斷 ``` let age = Number(prompt('安安請問你幾歲呀')); if(isNaN(age)){ window.alert('請輸入正確的年齡數字喔') }else if(age < 18){ window.alert('你還未滿合法年紀,不能投票喔') }else if(age >= 18 && age < 20){ window.alert('你滿18還未滿20,可以投總統,但不能投公投喔') }else{ window.alert('你可以投總統和公投喔') } ``` ### switch條件判斷 1. switch(變數/條件) -> 要判斷的變數或條件 2. case 條件:->符合的值,相當於if(a===b) 3. break -> 每個case執行區塊的結束 沒使用將會繼續執行下一個case 4. default: -> 當所有case都不符合時,會執行此區塊 基本款 ``` switch(變數){ case 條件1: //符合條件1的執行區塊 break; case 條件2: //符合條件2的執行區塊 default: //預設執行區塊 break; } ``` 變形1:switch裡面不放變數而是直接放條件式 ``` switch(條件式){ case true: //符合條件的執行區塊 break; default: //不符合條件的執行區塊 break; } ``` 變形2:多個case不使用break,符合時執行同個區塊 ``` switch(變數){ case 條件1: case 條件2: case 條件3: //符合條件1.2.3的執行區塊 break; case 條件4: case 條件5: //符合條件4.5的執行區塊 break; default: //預設執行區塊; break; } ``` 範例1(基本款): 依不同性別顯示不同提醒 ``` let gender = window.prompt('What is your gender? (F or M)'); switch(gender){ case 'F': window.alert('You are a female.'); break; case 'M': window.alert('You are a male'); break; default: window.alert('Wrong Gender'); break; } ``` 執行第一行時將透過使用者取得gender (ex: gender=’F’) 執行到case ‘F’ 時因為判斷gender === ‘F’ 為true,故執行下方區塊 彈出"You are a female."提醒後,遇到break會跳出整個switch區塊 (沒有break的話會繼續執行並彈出"You are a male"提醒) 範例2(變形1): 判斷是否成年 ``` let age = Number(window.prompt('您幾歲呢?請輸入數字')) switch(age >=18){ case true: window.alert('您已成年'); break; case false: window.alert('您未成年'); break; } ``` 當使用者輸入年齡後轉換為數字存放在age中(ex: age = 20) 第一行switch中,先判斷age >= 18 ,得到true 執行到case true 時因為判斷 true === true為true,固執行下方區塊 彈出"您已成年"提醒後,遇到break會跳出整個switch區塊 範例3(變形2): 計算不同月份的天數 ``` let month = Number(window.prompt('請輸入月份')); if(isNaN(month)){ window.alert(`重新輸入,請輸入1-12的數字`); }else{ switch(month){ case 1: case 3: case 5: case 7: case 8: case 10: case 12: window.alert(`${month}月有31天`); break; case 2: window.alert(`${month}月有28或29天`); break; default: window.alert(`${month}月有30天`); break; } } ``` 當使用者輸入月份後轉換為數字存放在month中(ex: month = 7) 執行到case 7時因為判斷 month === 7為true,固執行下方區塊 彈出"31天"提醒後,遇到break會跳出整個switch區塊 (反之,若使用者輸入month=6,因上方case都不符合,故會執行default區塊,彈出"30天"提醒) --- 作業 1. 彈跳視窗詢問使用者出生年份 計算出使用者今年幾歲 彈跳視窗詢問使用者性別 條件判斷如下 若為女性,且18歲以上,則彈跳訊息視窗並顯示18歲 若為男性,或18歲以下的女性,則彈跳訊息視窗並顯示其真實歲數 若輸入資料無法判定性別,則彈跳訊息視窗並顯示錯誤訊息 ``` let year = Number(window.prompt('請輸入您的出生年份')); let age = 2023 - year; if(isNaN(year) || year > 2023){ window.alert('請輸入正確年份'); }else{ let gender = window.prompt('請輸入您的性別(男性請輸入M,女性請輸入F)'); if(gender === 'F' && age >= 18){ window.alert('你現在是十八歲'); }else if(gender === 'M' || age < 18){ window.alert(`你現在是${age}歲`); }else{ window.alert('請輸入正確性別'); } } ``` 2. 彈跳視窗詢問年分 彈跳視窗詢問月份 告訴使用者該月共幾天 !!!需處理閏年,規則如下 任何能被4整除的年份都是閏年 → 例如 1988 年、1992 年及 1996 年都是閏年 但是能以 100 (例如1900 年) 整除的年份,同時也必須要能以 400 整除,才算是閏年 → 因此,下列年份不是閏年:1700、1800、1900、2100、2200… → 下列年份為閏年:1600、2000、2400 ``` let year = Number(window.prompt(`請輸入年份`)); if(isNaN(year)){ window.alert(`請輸入正確年份`); }else{ let month = Number(window.prompt(`請輸入月份`)); switch(month){ case 1: case 3: case 5: case 7: case 8: case 10: case 12: window.alert(`${year}年的${month}月是31天`); break; case 2: if(year%4===0){ if(year%100===0 && year%400===0){ window.alert(`${year}年的${month}月是29天`); }else{ window.alert(`${year}年的${month}月是29天`); } }else{ window.alert(`${year}年的${month}月是28天`); } break; case 4: case 6: case 9: case 11: window.alert(`${year}年的${month}月是30天`); break; default: window.alert(`請輸入正確月份`); break; } } ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up