昨天我們讓 JS 裝好了變數這個小盒子,今天我們要教這個「木頭人」學會思考。
在現實生活中,我們隨時都在做條件判斷:「如果外面下雨,就帶雨傘;否則,就戴太陽眼鏡。」
而在前端網頁的世界裡也是如此:如果使用者輸入的密碼正確,就登入成功;否則,就跳出錯誤提示。
這就是 JavaScript 裡最經典的控制流程——if-else 條件判斷式!
let userScore = 85;
// 如果分數大於或等於 60 分
if (userScore >= 60) {
console.log("恭喜你,及格過關!");
}
// 否則(小於 60 分)
else {
console.log("哎呀,需要再加加油喔!");
}
1. if (條件):小括號裡放要檢查的條件(例如:userScore >= 60),只要結果是 true(對),就會執行大括號裡的第一段程式碼。
2.else:如果上面的條件不成立(是 false),就會自動落入 else 的區塊,執行另一套邏輯。
else if 就像分流閘道如果情況比較多種(例如評分有分優秀、及格、不及格),我們還可以串接好幾個 else if:
let grade = 'B';
if (grade === 'A') {
console.log("太神啦!優秀!");
} else if (grade === 'B') {
console.log("表現不錯,繼續保持!");
} else {
console.log("革命尚未成功,同志仍須努力!");
}
今天我們用流程圖的邏輯,輕鬆掌握了 JavaScript 的 if-else 條件判斷,讓網頁具備了根據不同狀況做出反應的能力。
學會了判斷與邏輯後,明天我們要來介紹如何把一堆資料「整齊收納」的好幫手——陣列(Array)與物件(Object)!