30-Days-Of-JavaScript/js_notes/05-conditionals.js

// 05 · 条件与布尔
// 学练复习一体:概念总结 → 示范 → 轮到你
// 跑法:Quokka / 右上角 ▷ / node 本文件
// 示范区带预期输出;轮到你区只给要求,自己写

// ═════ 概念总结 ═════
//
// 程序会"做决定"—— 根据条件走不同分支。这是代码从"一条直线"变成"有逻辑"的开始。
//
// 1. if / else if / else
//       const age = 20
//       if (age >= 18) {
//         console.log('成年')
//       } else if (age >= 13) {
//         console.log('青少年')
//       } else {
//         console.log('儿童')
//       }
//    - 条件写在 () 里,结果要是 true/false(或真假值,见第 4 节)
//    - {} 里是满足时执行的代码
//    - 从上往下,命中第一个成立的就停,后面不再判断
//
// 2. 三元运算符 ? : ⭐
//    if/else 的极简版,一行搞定"二选一",而且有返回值可以赋给变量:
//       const status = age >= 18 ? '成年' : '未成年'
//       //             条件      ? 真时的值 : 假时的值
//    适合:简单的二选一赋值。
//    别滥用:逻辑复杂就用 if,别把三元套三元,可读性差。
//
// 3. switch(多分支)
//    当一个值要和很多固定选项比对时,比一长串 else if 清爽:
//       switch (day) {
//         case 1:
//           console.log('周一')
//           break   // ← 别忘!否则会"穿透"继续执行下面的 case
//         case 3:
//           console.log('周三')
//           break
//         default:
//           console.log('其他')
//       }
//    为什么每个 case 都要 break —— "穿透"(fall-through)⭐
//    关键:case 不是"独立的盒子",而是"跳转的入口(标签)"。匹配成功后程序从那个
//    入口跳进去,然后一路往下执行,撞到 break 才跳出。不写 break 就会"掉进"下一个 case。
//       day = 1 时若各 case 都不写 break → 输出:周一 周二 周三(全跑了)
//    跨语言对比(纠正常见误解):
//    ┌───────────────────────────┬──────────────────────────────────────┐
//    │ 语言                      │ 要 break 吗                          │
//    ├───────────────────────────┼──────────────────────────────────────┤
//    │ C / C++ / Java / JS       │ ✅ 都要(JS 的 switch 就是抄 C 的)   │
//    │ Python                    │ 没有传统 switch(match 机制不同,不穿透)│
//    └───────────────────────────┴──────────────────────────────────────┘
//    记反了很常见:C++/Java 和 JS 一样都要写 break,不是自动 break。
//    穿透的唯一正当用法:多个 case 共用逻辑(故意省略 break):
//       case 6:
//       case 7:
//         console.log('周末')   // 6 和 7 都到这
//         break
//    💡 因为"忘写 break"太容易出 bug,现代 JS 常少用 switch,改用 if/else if
//       或对象查表(学对象后会讲)。知道 switch 怎么回事即可,实战非首选。
//
// 4. 真假值 truthy / falsy ⭐⭐(之前埋的伏笔)
//    if() 里不一定非要放 true/false —— 任何值都会被 JS 自动判成"真"或"假"。
//    假值(falsy)—— 常记这 6 个就够:
//       false    0    ''(空字符串)    null    undefined    NaN
//    (严格说还有 0n(BigInt 的零)和 -0,都少见,先把上面 6 个记牢)
//    真值(truthy)—— 除了上面 6 个,其他全是真:
//       包括非零数字、非空字符串、[] 空数组、{} 空对象(注意!空数组空对象是真)
//       if ('hello') …  // 会执行
//       if (0) …        // 不执行
//       if ([]) …       // 会执行(容易错)
//    用途:快速判断"有没有值"(空串是假 → 走 else 分支)。
//
// 5. 短路:&& / || 返回的是"操作数原值",不是布尔 ⭐⭐
//    关键认知:JS 的 &&/|| 不返回 true/false,而是返回其中一个操作数本身。
//    靠的是短路求值:能确定结果时立刻停下,返回"决定胜负的那个值"。
//    || :返回第一个真值(找到真就停);全假返回最后一个
//       '' || '匿名'    // '匿名'  ← 前面假,继续,返回后面
//       'Tom' || '匿名' // 'Tom'   ← 前面就是真,立刻返回,'匿名'看都不看
//       0 || 100        // 100
//    && :返回第一个假值(找到假就停);全真返回最后一个
//       'Tom' && '有值' // '有值'  ← 前面真,继续,返回后面
//       '' && '有值'    // ''      ← 前面就是假,立刻返回它
//       1 && 2 && 3     // 3       ← 全真,返回最后一个
//    跨语言对比(纠正误解):
//    ┌─────────────────────────────┬───────────────────────────────────┐
//    │ 语言                        │ &&/|| 返回                        │
//    ├─────────────────────────────┼───────────────────────────────────┤
//    │ JS / Python / Ruby / Lua    │ 操作数原值(如 '' || 'x' → 'x')  │
//    │ C / C++ / Java / C#         │ 严格 boolean                      │
//    └─────────────────────────────┴───────────────────────────────────┘
//    记反了很常见:Python 和 JS 一样返回原值;Java/C++ 才返回布尔。
//    两个超常用惯用法 ⭐:
//       const name = userInput || '游客'  // ① || 设默认值:没填(空串是假)就用 '游客'
//       user && user.login()              // ② && 做"守卫":user 存在才调用 login,避免报错
//       // (React 里满地都是:  条件 && <组件/>  → 条件成立才渲染)
//    想要纯布尔?用 !!:
//       !!'Tom' // true    !!'' // false    !!0 // false
//    ! 取反得布尔,!! 再反回来 → 纯 true/false。
//    💡 为什么这样设计:JS 到处用 truthy/falsy 而非死板布尔(见第 4 节),
//       所以 &&/|| 返回原值才顺理成章 —— 这两个知识点是一套的。
//
// ✅ 本主题要点回顾
//   1. if / else if / else:命中第一个成立的就停
//   2. 三元 条件 ? 真值 : 假值:简单二选一,有返回值 ⭐
//   3. switch:多分支,每个 case 别忘 break
//   4. falsy 常记 6 个:false 0 '' null undefined NaN(另有 0n/-0,少见);其余全 truthy(空数组空对象是真!)⭐⭐
//   5. &&/|| 返回操作数原值(非布尔):|| 取第一个真值(设默认值),&& 取第一个假值(做守卫);
//      要纯布尔用 !!。Python 同理,Java/C++ 才返回布尔 ⭐⭐

// ═════ 示范 ═════

// ── 1. if / else if / else ───────────────────────
const age = 20
if (age >= 18) {
  console.log('成年') // ← 命中这个,输出:成年
} else if (age >= 13) {
  console.log('青少年')
} else {
  console.log('儿童')
}

// ── 2. 三元运算符 ? : ⭐ ──────────────────────────
const status = age >= 18 ? '成年' : '未成年'
console.log(status) // 成年

// ── 3. switch(每个 case 别忘 break)───────────────
const day = 3
switch (day) {
  case 1:
    console.log('周一')
    break
  case 3:
    console.log('周三') // ← 输出:周三
    break
  default:
    console.log('其他')
}

// ── 4. truthy / falsy ⭐⭐ ────────────────────────
// 假值只有 6 个:false 0 '' null undefined NaN
if ('hello') console.log('非空字符串 → 真') // 会执行
if (0) console.log('这行不会执行') // 0 是假
if ([]) console.log('空数组 → 真!') // 会执行(容易错)
if ('') {
  console.log('空串是真')
} else {
  console.log('空串是假 → 走这') // 会执行
}

// ── 5. 短路:|| 设默认值,&& 前真才看后 ⭐ ─────────
console.log('' || '匿名') // 匿名   ← 前面假,取后面
console.log('Tom' || '匿名') // Tom    ← 前面真,直接取
console.log(true && '继续') // 继续

// ═════ 轮到你 ═════

// 👇 轮到你(只给要求,自己写代码)

// 练习 A:给一个 const score = 75
//   用 if/else if/else 判断等级并打印:
//   >=90 打印 'A',>=60 打印 'B',否则打印 'C'

const score = 75
if (score >= 90) {
  console.log('A')
} else if (score >= 60 ) {
  console.log('B')
} else {
  console.log('C')
}

// 练习 B:把练习 A 里"是否及格(>=60)"改用【三元运算符】写,
//   得到 '及格' 或 '不及格',打印出来
console.log(score >= 60 ? '及格' : '不及格')


// 练习 C(truthy/falsy):有 const username = ''
//   用 if 判断:如果 username 有值就打印它,否则打印 '游客'
//   (想想空字符串是真还是假)
const username = ''
if (username) {
  console.log(username)
} else {
  console.log('游客')
}


// 练习 D(短路,动脑):用 || 把练习 C 改成【一行】,
//   效果一样:有名字用名字,没名字用 '游客'
console.log(username || '游客')


// 练习 E(挑战):写一个三元,判断 num 是奇数还是偶数,
//   const num = 7,打印 '奇数' 或 '偶数'(回忆 % 取余)
const num = 7
console.log(num % 2 === 1 ? '奇数' : '偶数')


if (-3) {
  console.log('true')
} else {
  console.log('false')
}