認識 JavaScript (十二)

閱讀時間約 4 分鐘

※ 條件判斷語法

決策中需要處理分歧的狀況,就會用到「if」、「else if」、「else」。

語法結構:

  • 條件式使用小括號(),裡面放判斷式。
  • 要執行的程式碼放在大括號{}裡。
  • 條件式只會有 true 或 false 兩種結果。
raw-image

常用的比較運算子:

  • > 大於
  • < 小於
  • === 等於
  • >= 大於等於
  • <= 小於等於
  • !== 不等於

※ 條件式怎麼寫?

let milkTeaPrice = 55
let blackTeaPrice = 35
let budget = 50

if (budget >= milkTeaPrice) {
budget = budget - milkTeaPrice
console.log('立即買杯奶茶!')
} else if (budget >= blackTeaPrice ) {
budget = budget - blackTeaPrice
console.log('改買一杯樸實的紅茶吧!')
} else {
console.log('無奈地離開!')
}

console.log(`錢包剩下${budget}`)

※ 流程解說:

raw-image


※ 合併條件判斷

常用的邏輯運算子:

  • &&:代表「而且」,例如 a > 3 && a < 5,前後兩組條件都要成立,才會回傳 true。
raw-image

&&的用法:

  1. true && true => true
  2. true && false => false
  3. false && true => false
  4. false && false => false
  5. false && false => false

基於電腦為了提高執行效率避免不必要的運算,只要有一個條件為 false,整個判斷式的結果就已經確定為 false因此複雜的判斷式要放在&&後頭

if (簡單的判斷式 && 複雜的判斷式 ) {

}
  • ||:代表「或」,例如 a > 3 || a < 5,只要有一組成立就回傳 true。

||的用法:

  1. true || true => true
  2. true || false => true
  3. false || true => true
  4. false || false => false

基於電腦為了提高執行效率避免不必要的運算,只要有一個條件為 false,整個判斷式的結果就已經確定為 false因此複雜的判斷式要放在 ||後頭

if (簡單的判斷式 || 複雜的判斷式 ) {

}
  • !:代表「非」,假設 a > 3 是 true,那麼 !(a > 3) 就會是 false。

※ 分數判斷例子

// A:分數90分以上(包含90分)
// B:分數80分以上(且不到90分)
// C:分數70分以上
// D:分數60分以上
// F:分數不到60分
// -:分數不是0 - 100分
// 滿足erro first原則

const score = 98 //自行調整參數
if (score < 0 || score > 100) {
console.log('-')
} else if (score >= 90 ) {
console.log('A')
} else if (score >= 80) {
console.log('B')
} else if (score >= 70) {
console.log('C')
} else if (score >= 60) {
console.log('D')
} else {
console.log('F')
}


raw-image


    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    認識 JavaScript (六)
    閱讀時間約 1 分鐘
    認識 JavaScript (七)
    閱讀時間約 1 分鐘
    認識 JavaScript (八)
    閱讀時間約 2 分鐘
    認識 JavaScript (九)
    閱讀時間約 3 分鐘
    認識 JavaScript (十)
    閱讀時間約 1 分鐘
    認識 JavaScript (十一)
    閱讀時間約 2 分鐘