--- title: JS直播班練習 - if 數值區間 + 邏輯運算子 tags: description: --- if 數值區間 + 邏輯運算子 --- ## 本章節我們要學什麼? 學習[條件判斷](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/if...else),並且了解[邏輯運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators)。藉由包裝生活中常見的基礎算式來練習邏輯能力。 ### 題目一:多重條件 一週有七天,請製作一個函式可輸入不同的星期日數,並回傳當天的心情小語,如下例: ``` =JavaScript // input 輸入 myThought(1) myThought(7) myThought(8) // output 輸出 "星期一:穿新衣。" "星期日:來考試。" "一周只有七天,輸入錯囉" ``` **(心情小語內容可自訂、必須使用 [Switch](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/switch) 語法來達成。)** :point_right: [switch](/g94VaSGpSaSlthV9EG75UQ) **解答:** ```javascript= function myThought(num){ switch (num) { case 1: return `星期一:猴子穿新衣`; break; case 2: return `星期二:猴子肚子餓`; break; case 3: return `星期三:猴子去爬山`; break; case 4: return `星期四:猴子看電視`; break; case 5: return `星期五:猴子在跳舞`; break; case 6: return `星期六:猴子去斗六`; break; case 7: return `星期日:猴子過生日`; break; default: return `一周只有七天,輸入錯囉`; break; }; }; console.log(myThought(1)); // 星期一:猴子穿新衣 console.log(myThought(7)); // 星期日:猴子過生日 console.log(myThought(8)); // 一周只有七天,輸入錯囉 ``` <br> ### 題目二:飲酒測試 最低法定飲酒年齡為 18 歲,請撰寫一個函式來測驗輸入的年齡是否能飲酒。 ``` =JavaScript // input 輸入 isDrinkable(7) isDrinkable(18) // output 輸出 false true ``` **(必須使用[條件運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)來達成。)** **解答:** ```javascript= function isDrinkable(age) { return age >= 18 ? `**可以飲酒**` : `**不可飲酒**`; }; console.log(isDrinkable(16)); // **不可飲酒** console.log(isDrinkable(18)); // **可以飲酒** console.log(isDrinkable(21)); // **可以飲酒** ``` <br> ### 題目三:發燒檢測 人的中心體溫通常會自動調節在 37 ℃ 左右,只要 ≥ 38度就代表可能發燒了!請製作一個探測人體溫度是否發燒的函式。 ``` =JavaScript // input 輸入 isFever(37) isFever(39) // output 輸出 False True ``` **解答:** ```javascript= function isFever(temp) { return temp < 33 ? `你已失溫` : temp >= 38 ? `你已發燒` : `你未發燒`; }; console.log(isFever(32)); // 你已失溫 console.log(isFever(37)); // 你未發燒 console.log(isFever(39)); // 你已發燒 ``` <br> ### 題目四:溫標轉換 目前常見的溫度標示有攝氏(°C)與華氏(°F),請撰寫兩個函式可以轉換彼此四捨五入至小數第一位,如下範例。 * 攝氏轉華氏: (10°C x 9/5) + 32 = 50°F * 華氏轉攝氏: (10°F − 32) × 5/9 = -12.2°C ``` =JavaScript // input 輸入 CtoF(10) FtoC(10) // output 輸出 50 -12.2 ``` **解答:** ```javascript= function CtoF(temp) { return Math.round(((temp / 5 * 9) + 32) * 10) / 10; }; function FtoC(temp) { return Math.round((temp - 32) / 9 * 5 * 10) / 10; } console.log(CtoF(-12.2)); // 10 console.log(FtoC(10)); // -12.2 ``` <br> ### 題目五:餵食青蛙 請幫遊戲內的青蛙角色設計被餵食飼料時的反應,輸入不同種類單位大小的飼料,讓青蛙做出相對應的回饋,如下範例: * 飼料太小(<=5) 回傳 "嘓!" * 飼料太大(>=50) 回傳 "嘔" * 如果以上都不是,回傳 "..." ``` =JavaScript // input 輸入 frogEat(1) frogEat(100) frogEat(10) // output 輸出 "嘓!" "嘔" "..." ``` **解答:** ```javascript= function frogEat(num) { return num <= 5 ? `嘓!` : num >= 50 ? `嘔` : `...`; }; console.log(frogEat(1)); // 嘓! console.log(frogEat(100)); //嘔 console.log(frogEat(10)); // ... ``` <br> ### 題目六:計算球體體積 請製作一個球體積計算函式,參數為半徑,回傳計算後四捨五入取至第一位小數的結果。 球體積 = 4 / 3 x π x 球半徑³ ``` =JavaScript // input 輸入 sphereVolume(1) sphereVolume(10) sphereVolume(20) // output 輸出 4.2 4188.8 33510.3 ``` 可參考:[球體積計算機](https://www.google.com/search?client=firefox-b-d&q=sphereVolume+calc) **解答:** ```javascript= // 題目六:計算球體體積 function sphereVolume(raddius) { return Math.round(3.14159 / 3 * 4 * Math.pow(raddius, 3) * 10) / 10; }; console.log(sphereVolume(1)); // 4.2 console.log(sphereVolume(10)); // 4188.8 console.log(sphereVolume(20)); // 33510.3 ``` #### 延伸閱讀 - [Math.round() - 四捨五入後的近似值](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/round) - [Math.pow()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/pow) <br> ### 題目七:BMI 計算 BMI 稱為身體質量指數(Body Mass Index,縮寫為BMI),是目前美國疾病管制局及世界衛生組織所認可,利用身高為基礎來測量體重是否符合標準。請套用以下公式製作一個 BMI 計算函式。 <div style="text-align: center; padding: 4rem"> BMI = 體重(公斤) / 身高的平方(公尺) </div> ![BMI範圍表格](https://i.imgur.com/Ca8hB0Z.png) ``` =JavaScript // input 輸入 bmi(cm,kg) bmi(178,20) bmi(178,65) bmi(178,77) bmi(178,89) bmi(178,100) bmi(178,200) // BMI(身高,體重) // output 輸出 "體重過輕" "正常範圍" "異常範圍" "異常範圍" "異常範圍" "異常範圍" ``` 延伸思考:可將過重、輕度肥胖、中度肥胖、重度肥胖、腰圍功能判斷也完成。 ```javascript= function checkWaistline(sex, waistline) { return sex === 'male' ? waistline >= 90 ? `腰圍異常` : `腰圍正常` : waistline >= 80 ? `腰圍異常` : `腰圍正常`; }; function BMI(height, weight, sex, waistline){ const bmi = Math.round(weight / Math.pow(height / 100, 2) * 100) / 100; if (bmi < 18.5) { return `${sex === 'male' ? `男性` : `女性`},BMI值${bmi},體重過輕,${checkWaistline(sex, waistline)}`; } else if (bmi >= 18.5 && bmi < 24) { return `${sex === 'male' ? `男性` : `女性`},BMI值${bmi},體重正常,${checkWaistline(sex, waistline)}`; } else if (bmi >= 24.5 && bmi < 27) { return `${sex === 'male' ? `男性` : `女性`},BMI值${bmi},體重過重,${checkWaistline(sex, waistline)}`; } else if (bmi >= 27 && bmi < 30) { return `${sex === 'male' ? `男性` : `女性`},BMI值${bmi},輕度肥胖,${checkWaistline(sex, waistline)}`; } else if (bmi >= 30 && bmi < 35) { return `${sex === 'male' ? `男性` : `女性`},BMI值${bmi},中度肥胖,${checkWaistline(sex, waistline)}`; } else if (bmi >= 35) { return `${sex === 'male' ? `男性` : `女性`},BMI值${bmi},重度肥胖,${checkWaistline(sex, waistline)}`; }; }; console.log(BMI(180, 55, 'male', 89)); // 男性,BMI值16.98,體重過輕,腰圍正常 console.log(BMI(180, 120, 'female', 80)); // 女性,BMI值37.04,重度肥胖,腰圍異常 ``` <br> ### 題目八:斜邊計算 直角三角形的斜邊長度公式為:x² + y² = z²,請製作一個輸入兩邊邊長並回傳四捨五入取至小數第一位斜邊的函式。 ``` =JavaScript // input 輸入 calcHypotenuse(10, 10) // output 輸出 14.1 ``` ```javascript= function calcHypotenuse(x, y) { return Math.round(Math.sqrt((x *= x) + (y *= y)) * 10) / 10; }; console.log(calcHypotenuse(10, 10)); // 14.1 ``` <br> ### 題目九:FizzBuzz FizzBuzz 是一個簡單的小遊戲,給定一串從 1 到 100 的數字: * 如果是 3 的倍數,就印出 “Fizz” * 如果是 5 的倍數,就印出 “Buzz” * 如果同時是 3 和 5 的倍數,就印出 “FizzBuzz” * 將結果回傳為一個陣列。 ``` =JavaScript // Todo 待完成 function fizzBuzz100(){ let result = [] let count = 1 while (count <= 100) { // // 在此的程式將會被執行 100 次 // 請撰寫判斷將 FizzBuzz 與數字放入 result 陣列之中 // count ++ } return result } // input 輸入 fizzBuzz100() // output 輸出 ["1","2","Fizz","4","Buzz","Fizz","7","8","Fizz","Buzz","11","Fizz","13","14","FizzBuzz"......後續省略] ``` ```javascript= function fizzBuzz100(){ let result = []; let count = 1; while (count <= 100) { count % 3 ? result.push(count) : count % 5 ? result.push('Fizz') : result.push('FizzBuzz'); count ++; } return result; }; console.log(fizzBuzz100()); // index : item 0: 1 1: 2 2: "Fizz" 3: 4 4: 5 5: "Fizz" 6: 7 7: 8 8: "Fizz" 9: 10 10: 11 11: "Fizz" 12: 13 13: 14 14: "FizzBuzz" 15: 16 16: 17 17: "Fizz" 18: 19 19: 20 ``` ### 題目十:蜘蛛下網 ![蜘蛛下網](https://i.imgur.com/PwwLRkY.png) 蜘蛛在一個由四個支撐點構成,11x11 單位的正方形蜘蛛網上。請製作一個函式以蜘蛛的座標為參數並依循以下規則回傳結果: * 計算出距離蜘蛛最近的點並回傳"哪裡是最近的支撐點 + 最短路徑距離"。 * 如果蜘蛛超出蜘蛛網外,回傳"蜘蛛不在網上了"。 ``` =JavaScript // input 輸入 spiderLeaveWeb(8, 3) spiderLeaveWeb(5, 5) spiderLeaveWeb(6, 5) spiderLeaveWeb(5, 6) spiderLeaveWeb(6, 6) spiderLeaveWeb(20, 20) spiderLeaveWeb(0, 0) spiderLeaveWeb(11, 0) spiderLeaveWeb(0, 11) spiderLeaveWeb(11, 11) // output 輸出 "右上角為最近的支撐點,距離 4.2 單位" "左上為最近的支撐點,距離 7.1 單位" "右上角為最近的支撐點,距離 7.1 單位" "左下角為最近的支撐點,距離 7.1 單位" "右下角為最近的支撐點,距離 7.1 單位" "蜘蛛不在網上了" "左上為最近的支撐點,距離 0 單位" "右上角為最近的支撐點,距離 0 單位" "左下角為最近的支撐點,距離 0 單位" "右下角為最近的支撐點,距離 0 單位" ``` 延伸思考:可以將蜘蛛網的尺寸(最大x、最大y)作為參數帶入函式中,思考會遇到什麼樣的情境並撰寫判斷回應。 ```javascript= function spiderLeaveWeb(x, y){ let position = ''; const positionX = x && (x > 5 ? 11 - x : x) ** 2; const positionY = y && (y > 5 ? 11 - y : y) ** 2; let shortDistance = !positionX && !positionY ? 0 : Math.round(Math.sqrt(positionX + positionY) * 10) / 10; if (x > 11 || y > 11) { position = ''; } else if (x <= 5 && y <= 5) { position = '左上'; } else if (x > 5 && y <= 5) { position = '右上'; } else if (x <= 5 && y > 5) { position = '左下'; } else if (x > 5 && y > 5) { position = '右下'; }; return position === '' ? `超出範圍` : `${position}角為最近的支撐點,距離 ${shortDistance} 單位`; }; console.log(spiderLeaveWeb(1, 11)); console.log(spiderLeaveWeb(8, 3)); console.log(spiderLeaveWeb(5, 5)); console.log(spiderLeaveWeb(6, 5)); console.log(spiderLeaveWeb(11, 0)); console.log(spiderLeaveWeb(0, 11)); console.log(spiderLeaveWeb(11, 11)); console.log(spiderLeaveWeb(12, 12)); console.log(spiderLeaveWeb(12, 0)); console.log(spiderLeaveWeb(0, 12)); ```